10 Best Image Croppers In jQuery And Vanilla JavaScript (2022 Update)

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.

Originally Published July 17 2019, updated Feb 15 2022

Table of contents:

jQuery Image Cropping Plugins:

Feature Rich Image Cropping Plugin with Live Preview - Cropper.js

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

Feature Rich Image Cropping Plugin with Live Preview - Cropper.js

[Demo] [Download]


Resize/Rotate/Crop Images With jQuery - Cropzee

Cropzee is an easy, lightweight jQuery image cropper which enables the user to resize, rotate, crop, preview an image in an elegant modal popup.

Resize/Rotate/Crop Images With jQuery - Cropzee

[Demo] [Download]


Image Resize & Crop Plugin With jQuery And Canvas - imageResizer

imageResizer is a lightweight, easy-to-use image cropper & resizer plugin based on jQuery and HTML5 canvas element.

Image Resize & Crop Plugin With jQuery And Canvas - imageResizer

[Demo] [Download]


Crop Images Before Uploading - jQuery FineCrop

An easy image cropping jQuery plugin which provides a convenient interface to zoom/move/crop local images before uploading. Heavily based on HTML5 canvas API.

Crop Images Before Uploading - jQuery FineCrop

[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]


Vanilla JS Image Cropping Plugins:

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]


Crop Image Before Uploading – jsCrop.js

A small, canvas-based, vanilla JavaScript image cropper which lets you crop an image before uploading.

Crop Image Before Uploading – jsCrop.js

[Demo] [Download]


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]


Tiny Native JavaScript Image Cropper – Croppr.js

A simple, lightweight, customizable JS plugin used to crop any images with configurable Aspect Ratio, Min/Max sizes and much more.

Tiny Native JavaScript Image Cropper – Croppr.js

[Demo] [Download]


Conclusion:

Seeking more jQuery plugins or JavaScript libraries to create awesome Image Croppers on the web & mobile? See jQuery Image Crop and JavaScript Image Cropping sections for more details.

See also: