Circles

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.