Image Cropping

Jcrop is the quick and easy way to add image cropping functionality to your web application.
  1. Forms
  2. Image Cropping
Basic Handler

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!

[Jcrop Example]
Preview Pane

An example implementing a preview pane. Obviously the most visual demo, the preview pane is accomplished entirely outside of Jcrop with a simple jQuery-flavored callback. This type of interface could be useful for creating a thumbnail or avatar. The onChange event handler is used to update the view in the preview pane.

[Jcrop Example]
Animations + Transitions

Animation/Transitions. Demonstration of animateTo API method and transitions for bgColor and bgOpacity options. Color fading requires inclusion of John Resig's jQuery Color Animations plugin. If it is not included, colors will not fade.

Experimental shader active. Jcrop now includes a shading mode that facilitates building better transparent Jcrop instances. The experimental shader is less robust than Jcrop's default shading method and should only be used if you require this functionality.
Jcrop Image