Image Crop

easy way to add image cropping functionality to your web application...

An example with a basic event handler. Here we've tied several form values together with a simple event handler invocation. The result is that the form values are updated in real-time as the selection is changed using Jcrop's onChange handler.

That's how easily Jcrop can be integrated into a traditional web form!

sample
example
Selection Properties
Aspect Ratio
Shading
Animation
Current Selection
New Selections
Test Image
full small

About This Demo

And you thought Jcrop could only do rectangles! Well, that's still mostly true. This demo implements a custom Selection object that uses CSS properties to create the appearance of circles and ellipses.

Custom CSS and Shading

By setting the CSS property border-radius: 50%, we can give the selection an appearance of a circle or an ellipse. The built-in shader filter has been disabled, and a semi-opaque <div> has been inserted over the image to give the appearance of shading.

Cropping Irregular Selections

If you actually want to crop a circle or an ellipse, you're on your own. Jcrop will provide the rectangular coordinates for these crops, and further processing can be done to extract the circle or ellipse from the image.