10 Best Image Croppers In jQuery And Vanilla JavaScript

by jQueryScript,

What Is Image Cropper?

An image cropper is a web & mobile component which enable the user to resize, move, crop an area of images before they're uploaded to the server.

The most typical use is to select, crop and upload local images for avatars, cover photos, portfolio images, etc.

The Best Image Cropper

In this article you will find a hand-crafted list of 10 best, responsive, mobile-friendly image cropping plugins implemented in jQuery and Vanilla JavaScript. I hope you like it.

Table of contents:

jQuery Image Cropping Plugins:

Easy jQuery Image Cropping Plugin with Live Previews - Image Cropper

Image Cropper is an easy to use jQuery plugin for image cropping with support of live previews and custom aspect ratio.

Easy jQuery Image Cropping Plugin with Live Previews - Image Cropper

[Demo] [Download]


Simple jQuery Image Zoom, Pan and Crop Plugin - Cropit

Cropit is a jQuery & canvas based image cropping plugin which allows to crop a local image with image zoom and image pan support.

Simple jQuery Image Zoom, Pan and Crop Plugin - Cropit

[Demo] [Download]


Responsive Mobile-friendly Image Cropper With jQuery - rcrop

rcrop is a fully responsive, mobile-compatible jQuery image cropper which allows to resize images on the client side, while preserving the original aspect radios.

Responsive Mobile-friendly Image Cropper With jQuery - rcrop

[Demo] [Download]


Canvas Based Image Cropping Library For jQuery - Croppie

Croppie is an Html5 canvas based image cropping library that lets you create a square or circular viewport permitting to visually resize an image and perform a crop.

Canvas Based Image Cropping Library For jQuery - Croppie

[Demo] [Download]


Touch-enabled Image Cropping Plugin with jQuery and Canvas - canvasCrop

canvasCrop is a jQuery image cropping plugin which allows you to resize, rotate, and crop a local image in a rectangular crop area.

Touch-enabled Image Cropping Plugin with jQuery and Canvas - canvasCrop

[Demo] [Download]


Vanilla JS Image Cropping Plugins:

Easy Client Side Image Cropping Library – Cropper.js

Cropper.js is a tiny, simple-to-use JavaScript library which provides fast client side image cropping based on Html5 <canvas>.

Easy Client Side Image Cropping Library – Cropper.js

[Demo] [Download]


Lightweight Vanilla Javascript Image Cropper – imagecrop.js

imagecrop.js is a pure vanilla JavaScript library that creates a rectangle area around a given image allowing to visually resize an image and place a crop.

Lightweight Vanilla Javascript Image Cropper – imagecrop.js

[Demo] [Download]


A Lightweight Image Cropper With No Dependencies – imagecrop.js

imagecrop.js is a lightweight, dependency-free, vanilla JavaScript image cropper that has the ability to crop a specific image with a draggable, resizable crop area.

A Lightweight Image Cropper With No Dependencies – imagecrop.js

[Demo] [Download]


Mobile Image Cropping Library – AlloyCrop.js

AlloyCrop.js is a tiny JavaScript library that provides user- and touch-friendly image cropping functionality for your mobile web applications.

Mobile Image Cropping Library – AlloyCrop.js

[Demo] [Download]


Feature-rich Image Cropper With Pure JavaScript – Cropper.js

Cropper.js is the pure JavaScript version of the jQuery Image Cropper plugin which provides the feature-rich image cropping functionality on any image.

Feature-rich Image Cropper With Pure JavaScript – Cropper.js

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Image Croppers on the web & mobile? Check out the jQuery Image Crop and JavaScript Image Cropping sections.