Best jQuery Image Crop Plugins & Tutorials with Demo

    jQuery Cropbox plugin

    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.js plugin 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

    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.

    Features:

    • 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.

    Fakecrop : jQuery plugin to resize and crop bigger images

    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 : 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

    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

    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.

    Image Upload and Cropping with PHP and Jquery

    PHP and Jquery Image Upload and image cropping

    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 – 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 image crop jQuery plugin

    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).