Best jQuery Image Crop Plugins & Tutorials

Now Reading
Best jQuery Image Crop Plugins & Tutorials

jQuery Select Areas : Image Selection & Resize Plugin

jQuery-select-areas is a jQuery plugin that let you select multiple areas of an image, move them and resize them.
Read More

jQuery Slim, Image Upload and Ratio Cropping Plugin

Modern cross platform responsive image cropping and uploading. Slim features beautiful animations and graphics. Configuration and implementation are a walk in the park.


  • Responsive and Beautifully Animated
  • Compatible with both Bootstrap and Foundation
  • Super Fast
  • Able to auto crop and resize imagery
  • Capable of Correcting Device Orientation problems
  • Setup to upload via AJAX or Form POST
  • A Treat for the Eyes

Read More Demo

Resize And Crop Image Using PHP And jQuery

Resize and Crop Images is very useful and important technique to save space and bandwidth and it also decrease page execution time and load your webpage much faster.Crop the image when you want to a particluar part of an image to display like only your face and sunset behind you etc.So both are very useful and important technique you can do with your images.In this tutorial we will Resize and Crop an Image Using PHP and jQuery.
Read More

Photo Editor : JavaScript Photo Edition Application

Photo Editor is a photo editing application based on the Cropper.js.
Read More

Croppie : A jQuery Image Cropper

Croppie is a fast, easy to use image cropping plugin with tons of configuration options!
Read More

Smartcrop.js : Content Aware Image Cropping

Smartcrop.js is a javascript library implementing content aware image cropping. Smartcrop.js implements an algorithm to find good crops for images.
Read More

Enhance.js : Zoom & dynamically Crop Images

A simple jQuery plugin for image zooming – now with support for object-fit/object-position, powered by Velocity.js animations, complete with some pre-defined image cropping classes.
Read More

picEdit : jQuery front-end Image editor Plugin

An attempt to create a simple front-end image editor jQuery plugin that would replace a file-upload input box in a HTML form.The plugin will turn your form’s <input type=”file”… box into a tiny image editor/uploader. Perform basic image operations and preview your image before uploading to the server.
Read More

Cropimg : jQuery Cropping Plugin

Another cropping jQuery plugin.Catch image inside the box and move it. You can also zoom in or zoom out the photo by the buttons on right side.

Black elements on image, can be used to short zooming the image or move image to one of the corners, or center
Read More

Resizing and Cropping Images with HTML5 Canvas

In this tutorial we’re going to learn how to resize and crop an image using the HTML5 <canvas> element, and while we’re at it, let’s create some fancy controls for resizing, commonly seen in photo editing applications.
Read More


Picture cut is a jquery plugin that handles images in a very friendly and simple way, with a beautiful interface based on bootstrap or jquery ui, has great features like ajax upload, drag image from explorer, image crop and others.


  • Ajax Upload
  • Resize image
  • Drag image from explorer
  • Manipulate image size in bytes
  • Cropping image

Read More

Cropbox.js : jQuery Image Crop Plugin

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


  • support dataUrl for displaying image (function getAvatar)
  • support Blob for uploading image (function getBlobFile)

Read More

HTML 5 Upload Image, Ratio with Drag and Drop

A HTML5 Upload image tool, full use of HTML5 with canvas (with fallback options). Together with a ratio and drag & drop makes this tool ideal for use in a CMS.


  • uses canvas to crop the image, no server scripts needed!
  • want to use a server script, no problem! simple change it with additional options
  • full HTML5 support
  • save your image with AJAX or use the tradional FORM input file element
  • uses ratio to let it fit your screen or element
  • easy to use
  • additional options to configure
  • bootstrap 3.1
  • jQuery

Read More Demo

Guillotine : jQuery Image Crop Zoom Rotate 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.

Read More

Cropit : jQuery Customizable Crop and Zoom Plugin

  • A jQuery plugin for image cropping and zooming.
  • Loads images locally via FileReader, and does cropping using canvas.
  • Designed to be extremely customizable via CSS.
  • Best for the cases where you want users to upload images of a specific size and ratio.

Read More

Image Cropper : jQuery Image Cropping plugin

Image Cropper is a jQuery image cropping plugin.
Read More

Imager – Amazing Image Tool for WordPress

The plugin allows to create unlimited image sizes, regenerate the thumbs and to add css filters and animations directly from WP’s Media Section.


  • Custom thumb sizes
  • Unlimited sizes
  • WP Cropping
  • Manage sizes as Posts
  • Save your sizes from WP or Theme Updates
  • Regenerate all thumbnails in 1 Click
  • Find your custom sizes in WP MEDIA select
  • Add 31 different CSS Filters to the thumb
  • Add 30 different CSS Animation to the thumb
  • Manage the options in “ADD MEDIA” (editor)

Read More Demo

Croppic : Image cropping jQuery plugin

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

jQuery Viewport-Crop : Simple & hassle-free Image Resize & Crop

Simple & hassle-free image resize & crop based on a pseudo-viewport. Touch-friendly via touch-punch.No special requirements for use, by default it modifies the behaviour of each image tag it finds.
Read More

jQuery.FileAPI : jQuery plugin for FileAPI

jQuery.FileAPI — jquery plugin for FileAPI (multiupload, image upload, crop, resize and etc.)
Read More

jQuery Cropbox plugin

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

This plugin depends only on jQuery. If either Hammer.js or jquery.hammer.js is loaded, the cropbox plugin will support gestures for panning and zooming the cropbox. Similary, if the jquery.mousewheel.jsplugin is loaded, then the cropbox plugin will support zoom in & out using the mousewheel. All dependencies on third party libraries (other than jQuery) are strictly optional. Support for CommonJS and AMD loading is built in.

In browsers that support the HTML5 FIle API and Canvas API, the cropbox plugin provides mehtods to crop the image on the client and obtain the resulting cropped image as a Data URL or a binary blob to upload it to the server.
Read More

jQuery Image Crop

A cropper for when you need images to be a specific size. It works using a predetermined aspect ratio. The UI differs from other croppers, here you may drag the image into position and even resize it.


  • Works in all the major browsers, including IE8+ and mobile.
  • Minimal code. Doesn’t require jQuery UI.
  • The UI differs drastically from traditional image croppers.
  • Idiot-proof. I’ve added precautions to insure the computer illiterate don’t break it. For example, if the image proporations do not scale to the predetermined aspect ratio, then the image will automatically zoom in until it does scale.
  • Aspect ratio is easily changable through CSS. You haven’t got to touch any JavaScript.
  • Crop coordinates are sent to a .php file, where the image is cropped using imagemagick.
  • Custom styles. The code is barebones, it’s very easy to style.

Read More Demo

Fakecrop : jQuery plugin to resize and crop bigger images

jQuery-Fakecrop Plugin takes a collection of images and automatically scale them to fit a custom-defined bounding box. This creates a “fake” cropping effect on those images; which produces convincing thumbnails.
Read More

CropZoom : jQuery Plugin Select an area of an image and then Crop

CropZoom is a plugin that let you select an area of an image and then crop it. whit this tool you also will be able to zoom in or to zoom out, to drag and also rotate an image.

Read More

Php & jQuery image upload and crop

We needed a PHP and jQuery image upload and crop tool and came up with the following.

Before you start, ensure you have the following:

  • PHP 4 or Higher (It has been tested on Version 5)
  • Safe mode must be off! – A number of users have reported issues when safe mode is on.
  • PHP GD Library
  • jQuery ver 1.2.3 or Higher
  • Image Area Select plugin by Michal Wojciechowski

Read More

Ajax Image Upload without Refreshing Page using Jquery

Are you looking for ajax file/image upload and preview without refreshing page using Jquery. I had implemented this ajax form submitting using jquery.form plugin and used image cropping PHP code for uploading images. Just five lines of JavaScript code, Using this you can upload files, image and videos.
Read More

Image Upload and Cropping with PHP and Jquery

Image cropping is the most important and required part in social media projects. In this post my friend had implemented image cropping functionalities such as upload image file into physical location, cropping image using jquery and resizing image into small resolution.
Read More

Jcrop – The jQuery Image Cropping Plugin

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.
Read More

imgAreaSelect image crop jQuery plugin with Demo

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).
Read More