18 jQuery Image Cropping Examples

About a code

ijaboCropTool.js

This jQuery plugin will help you to crop images in a certain applications. You can use this plugin on the user profile page where user can use this for cropping and update profile picture or avatar. You can also use this as image resizer tool on your dashboard.

About a code

Cropzee.js

Cropzee (image cropper) is a free, and open source customizable jQuery plugin to crop and rotate pictures before submitting for upload.

Dependencies: animate.css, light-modal.css, croppr.js, filesaver.js, canvas-toblob.js

smartcrop.js

Smartcrop.js implements an algorithm to find good crops for images.

Cropper

A simple jQuery image cropping plugin.

• 38 options
• 27 methods
• 6 events
• touch (mobile)
• zooming
• rotating
• scaling (flipping)
• multiple croppers
• supports to crop on a canvas
• supports to crop image in the browser-side by canvas
• supports to translate Exif Orientation information
• cross-browser

Jcrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

• attaches unobtrusively to any image
• supports aspect ratio locking
• supports minSize/maxSize setting
• callbacks for selection done, or while moving
• keyboard support for nudging selection
• API features to create interactivity, including animation
• support for CSS styling
• experimental touch-screen support (iOS, Android, etc)

jQuery FocusPoint

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

Croppic

Croppic is an image cropping jquery plugin that will satisfy your needs and much more.

jQuery.FileAPI

jQuery plugin for FileAPI (multiupload, image upload, crop, resize and etc.).

Cropit

A customizable crop and zoom jQuery plugin.

• works on desktop and mobile with touch support (except IE 9 and below)
• drag'n'drop image into cropper
• extremely performant even with huge images
• extensive options and APIs to give you full control

jQuery Cropbox Plugin

jQuery plugin for in-place image cropping (zoom & pan, as opposed to select and drag).

jQuery Guillotine Plugin

Guillotine is a jQuery plugin that allows to drag, zoom or rotate an image to select a cropping area. Like selecting the display area of a profile picture or avatar.

• responsive: the window (or selection area) is fully responsive (fluid)
• touch support: dragging the image also works on touch devices

Cropbox.js

A lightweight and simple JavaScript, Jquery, YUI plugin to crop your avatar.

bl-jquery-image-center

Centers an image by moving, cropping and filling spaces inside it's parent container.

Cropimg

Another cropping jQuery plugin.

Responsive Cropper

Responsive Cropper is a full responsive JQuery plugin that lets you select an area from an image and prepare crop information to send it to the server.

• responsive (percentage values)
• preserve Aspect ratio: shift key or from options
• easy CSS/SCSS full customization
• grid
• minimum and Maximum crop area
• mobile compatibility
• methods and Events

CropSelectJs

A simple image cropping selection jQuery plugin.

jQuery imgFitter Plugin

jQuery Plugin for resize and crop image without wrapper tags.

Simple Cropper

Simple Cropper is a jQuery plugin which gives you ability to add cropping functionality to your web application. It uses HTML5 canvas to create cropped images and CSS3, so it only works on latest browsers.

• attaches to any div element
• automatically detects aspect ratio of an element
• creates new cropped(base64 encoded) image and inserts it into element
• cropped images are generated client-side
• support for CSS styling