|
An example server-side crop script. Hidden form values are set when a selection is made. If you press the Crop Image button, the form will be submitted and a 150x150 thumbnail will be dumped to the browser. Try it!
back Java Script image Crop, jquery
This example is provided as a demo of the default behavior of Jcrop. Since no event handlers have been attached it only performs the cropping behavior.
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, thanks to Jcrop's onChange event handler.
That's how easily Jcrop can be integrated into a traditional web form!
|
|
An example with aspect ratio locking and 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.
API feature demonstration. Press the buttons above to animate different selections. This demonstrates some of the upcoming API functionality, but actual implementation is currently undocumented (read the source).