We are having many image cropping plugins developed in jquery that are being used to crop an image. Jcrop is one of the plugins developed in Jquery. Jcrop is very easy to learn. In the current blog post we'll see how to use Jcrop to crop an image.
We will take the following image tag to see how jcrop is used.
Download the latest version of JCrop.js and Jcrop.css and keep them in your html file as below.
Initialise the Jcrop with the image tag as follows.
With the above snippet will convert the image tag into a widget to crop the image.
1. aspectRatio: Aspect ratio of w/h (e.g. 1 for square) this will keep the aspect ratio for the selected area in the image.
2. minSize, maxSize: These two will keep the minimum and maximum cropping sizes of the image respectively.
1. onSelect: This is called when the selection is completed.
2. onRelease: This is called when the selected area is released.
3. onChange: This is called when the selection is moving.
Here is the complete example of how the above attributes and events used.