Form advanced
Cropper.js
A simple jQuery image cropping plugin with big futures for image optimization before crop.
For more info click to link official documentation
Jcrop
Jcrop is the quick and easy way to add image cropping functionality to your web application.
For more info click to link official documentation
This example demonstrates the default behavior of Jcrop.
Since no event handlers have been attached it only performs the cropping behavior.
![[Jcrop Example]](../vendors/Jcrop-master/demos/demo_files/sago.jpg)
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.
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.
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.
Example styling tricks.
Click the buttons above to change the appearance of Jcrop in real-time.
Attaching Jcrop to a non-image element.
This is mostly useful to implement other interfaces, such as canvas or over an arbitrary div.
This is an example of attaching Jcrop to a target that is not an image. You are now cropping a paragraph tag.