jQuery plugin to crop the image in place (zoom in/zoom out and move, rather than select and drag). This plugin is only jQuery based. If either Hammer.js or jquery.hammer.js is loaded, the Cropbox plugin will support the gestures of moving and zooming the crop box.

Similarly, if the jquery.mousewheel.js the plugin is loaded, and the Cropbox plugin will support zooming in and out using the mouse wheel. All dependencies on third-party libraries (other than jQuery) are completely optional. CommonJS upload support and AMD ROMs.

In browsers that support the HTML5 FIle API and Canvas API, the Cropbox plugin provides methods to crop the image on the client and get the cropped image as a data URL or blob binary for uploading to the server.

How to make use of it:

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

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

2. Include hammer.js or jQuery hammer.js to support gestures for moving and zooming the cropping box.

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

3. Include the jQuery mousewheel plugin to support zooming in and out using the mouse wheel.

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

4. Enter the image you want to crop into the document.

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

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

<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-refresh while the image is cropped.

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

7. 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,
max<a href=" ">Zoom</a>: 1,
controls: null,
showControls: 'auto',
label: 'Drag to crop'

jquery in-place image cropping, jquery-cropbox Plugin/Github

See Demo And Download

Official Website(acornejo): Click Here

This superior jQuery/javascript plugin is developed by acornejo. For extra advanced usage, please go to the official website.