On one of my plugins for sale on CodeCanyon called Upic, I integrated an image cropping feature. To do that, I had to try multiple plugins and ended using one simply called Cropper.js. In this article, I will show you how integrate it on your website too.

First of all, let’s check the demo of the result you should get with this plugin :

See Demo

In the demo, we have 3 elements :

  • The initial image to crop (with the actual cropper plugin applied on it)
  • A button to get the cropped version of the image
  • Another image (which is hidden by default) to show to cropped image after the button is clicked.

Importing the Required Files in your Page

Cropper.js is by default a Javascript plugin, not a jQuery one. However, the author has also made a jQuery wrapper which we will use in this tutorial to make it work with jQuery. So the first thing you have to do is to download :

  • The actual Cropper.js plugin here
  • The jQuery wrapper for this plugin here

From the ZIP of Cropper.js, we will use two files :

  • The CSS file dist/cropper.min.css
  • The JS file dist/cropper.min.js

And from the jQuery wrapper ZIP, only one file :

  • The JS file dist/jquery-cropper.min.js

Add these files to your website and import them, first for the CSS :

<link rel="stylesheet" href="css/cropper.min.css">

And for the JS, of course along with your jQuery import :

<script src="js/jquery.min.js"></script>
<script src="js/cropper.min.js"></script>
<script src="js/jquery-cropper.min.js"></script>

Now that we have imported everything, we will start by writing the HTML 😉

The HTML Structure

In the HTML structure of my demo, I use 2 images. The first one on which we apply the Cropper plugin and the second one that we will use for showing the cropped version of our image after the button is clicked. Here is the main structure I use in my demo :

<form>	
	<img id="img-to-crop" src="img/SplitShire-538.jpg" alt="My Image" />
	<img id="cropped-img" style="display: none;" />
	<br />
	<button class="btn btn-primary btn-crop">Crop Image</button>
</form>

Feel free to add some CSS on this HTML if you want, or download the demo files at the end of this article if you want to play with it 😉

In this HTML code, you can see that I have put some IDs on my images that we will later use in our JS code to target them. I have also hidden the second image by default with some CSS (style=”display: none;”).

Our required files are imported and our HTML structure is in place, now the FUN part : applying the plugin on all our page 🙂

Applying Cropper.js

The very first part is to really apply Cropper.js on the first image, to actually show the cropping area. We can achieve that with this JS code :

$(document).ready(function() {
	var $image = $('#img-to-crop');

	$image.cropper({
		aspectRatio: 16/9
	});
});

We target our image with the ID #img-to-crop and then we apply the Cropper plugin with an option to show it with an aspect ratio of 16/9. There are a lot of other options you can apply by default and you can find them on the author’s Github documentation page.

Now, the second part. As I said earlier in the tutorial, we want to get the cropped version to show it on our second img element. It can be useful if you are working on an uploader and you want to get the cropped version of the image to later upload it to your backend.

So here is the code I use to achieve that :

$(".btn-crop").click(function(e) {
	e.preventDefault();
	
	var base64 = $image.cropper('getCroppedCanvas').toDataURL();
	
	$("#cropped-img").attr("src", base64);
	$("#cropped-img").fadeIn();
});

In this code, I add a click event on my button with the class “.btn-crop”. Then, the most important part is to retrieve the cropped image version with the cropper plugin. I do that by getting the image base64 version of the cropped area :

var base64 = $image.cropper('getCroppedCanvas').toDataURL();

Then, I simply add the base64 to the src attribute and my hidden image and show it with the jQuery fadeIn() function :

$("#cropped-img").attr("src", base64);
$("#cropped-img").fadeIn();

So, not that complicated isn’t it 🙂 ?

Now you have everything in hand to apply this plugin to your website. Let me know in the comments if you need some help or if you have any questions 😉

And feel free to download the demo of this tutorial here :

Download Sources

… and don’t forget to subscribe if you want to receive new unique tutorials and source codes directly on your email :