flower

A basic example with form integration

X
Y
W
H
flower

Built-in Preview Support

Thumbnail previews just got much easier! Used to be, if you wanted to include a dynamic preview with Jcrop, you had to write client code. A number of people had difficulty adapting that code to their needs. No more! Now just attach a Thumbnailer object. Pass in the Jcrop instance, desired width, and height, and you're done.

flower

Selection Properties

Animation

Aspect Ratio

Shades

Current Selection

New Selections

flower

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.