Easy to use jQuery plugin for zoom & pan image cropping. This plugin is a rewrite of https://github.com/adriengibrat/jQuery-crop which itself is a rewrite of https://github.com/blackbiron/jWindowCrop :)
The main addition to this plugin is the ability to set the options after initialization and have the plugin auto-recalculate offsets and crop sizes, along with the auto-repositioning of the image (if required).
It's built in the style of sco.js library so if you're familiar with that, you should feel at home with this one too.
$('img.crop').jQcrop({
width: 600
,height: 300
}).on('crop.jQcrop', function(e, data) {
console.log('coordinates: ' + data);
if (data.stretch) {
console.log('image too small!!!!');
}
});| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| width | integer | 320 | no | Width in pixels of the cropping window |
| height | integer | 180 | no | Height in pixels of the cropping window |
| zoom | integer | 10 | no | Number of incremental zoom steps. With the default of 10, you have to click the zoom-in button 9 times to reach 100%. |
| controls | string/jquery | null | no | If not null, this is the entire html block that should appear on hover over the image for instructions and/or buttons (could include the zoom in/out buttons for example). If null, the default html block is used which has the text "Click to drag" and the zoom in/out buttons. Use '' (or false) if you don't want anything to appear. |
To get crop results, bind a function on the crop event or read the object's result property (see below)
A reference to the crop object can be accessed like so:
var crop = $('img.crop').data('jQcrop');
console.log(crop.results);You then have access to all the properties and methods used for that specific element. Most important is that you can alter the width/height and have the plugin auto-recalculate the crop results and auto-resize:
var crop = $('img.crop').data('jQcrop');
crop.set({width: 300, height: 300});