Learn how to easily crop and download images using jquery.cropbox.js.
With jquery.cropbox.js, you can easily implement image cropping functionality on your web page. To make it easy to understand, we will explain the code and steps in detail.
What is jquery.cropbox.js?
jQuery.cropbox.js is a lightweight jQuery plugin that allows you to easily implement image cropping functionality.
It supports zooming in/out and repositioning via drag, and also provides the ability to download the cropped image.
Preparing the CSS
Let’s start with the CSS. By loading the jquery.cropbox.css file, you can apply the basic styles for cropping.
Additionally, adding the following CSS will make it easier to see the cropping result and download link.
<link type="text/css" media="screen" rel="stylesheet" href="jquery.cropbox.css">
<style>
body {
font-size: 16px;
text-align: center;
}
h1{
text-align: center;
font-size: 18px;
line-height: 1.6em;
padding-top: 20px;
}
p{
line-height: 1.6em;
}
.results {
font-family : monospace;
font-size : 20px;
}
.download a{
font-size: 18px;
font-weight: bold;
}
</style>
Setting up JavaScript
Next, we write the JavaScript. To use jquery.cropbox.js, first load the required libraries: jquery.min.js, hammer.js, jquery.mousewheel.js, and jquery.cropbox.js.
Then, specify the image area you want to crop and call the cropbox method. The cropped results will be displayed in the element with the specified class name.
Write it as:
$(‘crop image area’).cropbox({image size options}).on(‘cropbox’, function(parameters) {set cropped image size, etc.})
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="hammer.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.cropbox.js"></script>
<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>
Writing the HTML
Finally, we write the HTML. Specify the image you want to crop with the img tag and add a link to download the cropped image.
Also, prepare a div element to display the cropping results.
Prepare the image to crop (img.jpg) with class=”cropimage”, and set download=”crop.png” in the download link tag.
<h1>Easily crop and download images using jquery.cropbox.js</h1>
<p>When you hover over the image, “−” and “＋” will appear below, so try zooming in and out.<br>Drag the image to move it to the position you want to crop, then click the “Download cropped image↓” link.</p>
<br>
<img class="cropimage" alt="" src="img.jpg" cropwidth="200" cropheight="200"/>
<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>
<div class="download">
<a href="#" download="crop.png">Download cropped image↓</a>
</div>
<br><br>
<img class="cropimage" alt="" src="img.jpg" cropwidth="300" cropheight="200"/>
<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>
<div class="download">
<a href="#" download="crop.png">Download cropped image↓</a>
</div>
<br>
Demo Page: Easily Crop and Download Images Using jquery.cropbox.js
By using the above code, you can easily implement image cropping functionality.
If you’d like to try the cropping feature, check out the demo page below.
Demo page to easily crop and download images using jquery.cropbox.js
Source: jquery-cropbox
You can find more details about the jquery-cropbox library, which provides this cropping functionality, on its GitHub repository.
Conclusion
That’s it for our guide on cropping and downloading images using jquery.cropbox.js.
By using jQuery.cropbox.js, you can easily add image cropping functionality to your website.
The implementation steps are intuitive and easy to follow, so be sure to give it a try.
*If you reuse this code, please do so at your own risk.
Do not reuse the Google Analytics tag in the head section of the demo page.
