Tuesday, 25 July, 2017 UTC
Summary
Dynamic image cropping is easier than ever thanks to libraries such as jQuery. The codebase is easy to use and the community has thousands of plugins for handling images.
Read Also: Six jQuery Best Practices for Improved Performance
One such plugin is Cropper, a free open-source image cropping solution that handles zooming, cropping, and even saving images.
This project is available on GitHub with some very lengthy documentation with dozens of custom features.
Cropper gives you (the developer) complete control over every aspect of the interface. You can work with 30+ different options and 20+ custom methods built into the Cropper plugin.
It’s fully touch-sensitive, so it works on all mobile devices and supports the scroll wheel/trackpad for zooming in & out of photos. Users can flip, rotate, scale, and reposition photos anywhere on the canvas before cropping.
The Cropper plugin requires a copy of jQuery and it comes with two files: a CSS stylesheet and the JavaScript plugin library. Just add these files to your page and it should be good to go!
Remember, this tool comes with a lot of features. The online documentation can help but you’ll need to get your hands dirty setting up an image upload field yourself to learn it all. Their sample code just outputs everything to the console and looks something like this:
$('#image').cropper({
aspectRatio: 16 / 9,
crop: function(e) {
// Output the result data for cropping image.
console.log(e.x);
console.log(e.y);
console.log(e.width);
console.log(e.height);
console.log(e.rotate);
console.log(e.scaleX);
console.log(e.scaleY);
}
});
But, you should really take a peek at the live demo to see how this all works.
You can find live output data of the X/Y coordinates, along with the image dimensions near the top. Cropper also includes an upload feature where the user can select an image from their computer and start cropping right in the browser.
Live thumbnails update in the corner, so you can see what the end result looks like before saving. Alter the aspect ratio, the output quality, the default crop position, and a whole bunch more.
Read Also: 5 Free Image Comparison Slider Scripts