10 Best Image Croppers In jQuery And Vanilla JavaScript (2024 Update)
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 Jan 10 2024
Table of contents:
jQuery Image Cropping Plugins:
Image Resize & Crop Plugin With jQuery And Canvas - cropimage
A lightweight, easy-to-use image cropper & resizer plugin based on jQuery and HTML5 canvas element.
Feature-rich Image Cropping Plugin - jQuery Jcrop.js
A robust jQuery image cropper plugin that provides a cross-browser, cross-platform, highly customizable image cropping tool for your web application.
Feature Rich Image Cropping Plugin with Live Preview - Cropper.js
An easy to use JavaScript/jQuery plugin for image cropping with support of live previews and custom aspect ratio.
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.
Canvas Based Image Cropping Library For jQuery - Croppie
An Html5 canvas based image cropping library that lets you create a square or circular viewport permitting to visually resize an image while preserving aspect ratio and perform a crop.
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.
Crop Image Before Uploading – jsCrop.js
A small, canvas-based, vanilla JavaScript image cropper which lets you crop an image before uploading.
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.
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.
Easy Client Side Image Cropping Library – Cropper.js
A tiny, simple-to-use JavaScript library which provides fast, touch-enabled, client-side image cropping based on Html5 canvas.
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.
