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.
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
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.
Photo Editor is a photo editing application based on the Cropper.js.
Croppie : A jQuery Image Cropper
Croppie is a fast, easy to use image cropping plugin with tons of configuration options!
Smartcrop.js : Content Aware Image Cropping
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.
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.
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
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.
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
Cropbox.js : jQuery Image Crop Plugin
- support dataUrl for displaying image (function getAvatar)
- support Blob for uploading image (function getBlobFile)
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
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.
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.
Image Cropper : jQuery Image Cropping plugin
Image Cropper is a jQuery image cropping plugin.
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)
Croppic : Image cropping jQuery plugin
Croppic is an image cropping jquery plugin that will satisfy your needs and much 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.
jQuery.FileAPI : jQuery plugin for FileAPI
jQuery.FileAPI — jquery plugin for FileAPI (multiupload, image upload, crop, resize and etc.)
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.
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.
- 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.
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.
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.
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
Ajax Image Upload without Refreshing Page using Jquery
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.
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.
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).