jQuery Image Cropping and Resizing Cropbox Plugin

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());
} );

} );

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.

Related Posts


Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…


Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…


How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…


A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…


Simple jQuery Plugin for Embedding YouTube Videos As Cover Background

jquery.youtube-background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…