Crop and Resize Images With This Simple jQuery Plugin

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.

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 featurescropper 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.

Cropper plugin demoCropper plugin demo

Source: http://www.hongkiat.com/blog/image-cropping-jquery-plugin-cropper/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s