jQuery In-Place Image Cropping Plugin - cropbox

cropbox is a jQuery plugin that enables you to crop an image by mouse drag with image pan & zoom support. The plugin will automatically generate a URL for the cropped image on the client (requires HTML5 compliant browser).

Basic Usage:

1. Include the jQuery library and jQuery cropbox plugin on the web page.

<link type="text/css" media="screen" rel="stylesheet" href="jquery.cropbox.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cropbox.js"></script>

2. Include the hammer.js or jQuery hammer.js to support gestures for panning and zooming the cropbox (OPTIONAL).

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.10/hammer.js"></script>

3. Include the jQuery mousewheel plugin to support zoom in & out using the mousewheel (OPTIONAL).

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.js"></script>

4. Insert an image you want to crop in the document. Use cropwidth and cropheight attributes to define the height and width of the image cropping box.

<img class="cropimage" alt="" src="img.jpg" cropwidth="400" cropheight="300"/>

5. Create a results container to display the information of your cropped image.

<div class="results"> <b>X</b>: <span class="cropX"></span> <b>Y</b>: <span class="cropY"></span> <b>W</b>: <span class="cropW"></span> <b>H</b>: <span class="cropH"></span> </div>

6. Create a download link that will auto update as you crop an image.

<div class="download"> <a href="#" download="crop.png">Download</a> </div>

7. The Javascript to enable the plugin.

<script type="text/javascript" defer>
$( function () {
$( '.cropimage' ).each( function () {
var image = $(this),
cropwidth = image.attr('cropwidth'),
cropheight = image.attr('cropheight'),
results = image.next('.results' ),
x = $('.cropX', results),
y = $('.cropY', results),
w = $('.cropW', results),
h = $('.cropH', results),
download = results.next('.download').find('a');

image.cropbox( {width: cropwidth, height: cropheight, showControls: 'auto' } )
.on('cropbox', function( event, results, img ) {
x.text( results.cropX );
y.text( results.cropY );
w.text( results.cropW );
h.text( results.cropH );
download.attr('href', img.getDataURL());
});
} );

} );
</script>

8. Default plugin options.

width: 200,
height: 200,
zoom: 10,
maxZoom: 1,
controls: null,
showControls: 'auto',
label: 'Drag to crop'

Change logs:

2015-05-07

• Support for hammer.js v2.0.4

2014-04-14

• Fixed drag function so update is only called is skipupdate is false

2014-08-28

• Fixed bug where if cropbox element was in a form element, the zoom-in and zoom-out buttons would submit the form. This is because buttons have the default type of "submit"
• Removed CSS expression, which is no longer supported in IE8+, so it is not needed by any of this plugins supported browsers. This line was also causing compile errors in some Less pre-processor libraries.

2014-06-28

• Updating css for zoom buttons
• Use buttons instead of links for zoom buttons

---

This awesome jQuery plugin is developed by acornejo. For more Advanced Usages, please check the demo page or visit the official website.