Image Cropping with jQuery, MooTools, Prototype & script.aculo.us

Posted on December 22, 2008, under jQuery, MooTools,  Bookmark it

JCrop is a JQuery image cropping plugin that can be implemented easily and quickly into a web application. Its advanced cropping functionality can be integrated in any web-based application without sacrificing power and flexibility. This plugin also features clean and well-organized code that works in most modern browsers.

Features
- Any image can be attached unobtrusively
- Aspect ratio locking is supported
- It supports minSize/maxSize
- Callbacks for selection done, or while moving
- Keyboard support for nudging selection
- API features to create interactivity, including animation
- Support for CSS styling

Browser compatibility
FireFox 3, Safari 3, Opera 9.5, Google Chrome 0.2.x, Internet Explorer 6+

[Go to Project Page | JCrop Implementation Theory | Demos and Examples]

imgAreaSelect

imgAreaSelect is a JQuery plugin useful to select a rectangular area of an image. The image cropping functionality can be easily integrated, as well as other user interface features, such as photo notes (such as those on Flickr).

Features include:
* The look of the selection area can be controlled (border width, selection color etc.)
* Width and height limits for the selection area
* Fixed aspect ratio: Keep exact proportions while selecting the desired area
* Callback functions
* Dynamically changing options
* Keyboard Support

[Go to Project Page | Examples]

mootools-crop

MooCrop is an Image Cropping Utility using the powerful JavaScript framework MooTools.

Features
* Completely customizable CSS styling
* Detects and handles multiple CSS box models
* Allows for masking to be toggled
* Ability to hide resize handles during drag
* Custom events for your own modification
* Relative based positioning rather then absolute (should handle overflow properly)
* Works and retains layouts on floating images.
* Resize from 8 different directions
* Ability to set minimum size limit
* Cleans up nicely, leaving your DOM in its original state when removed.
* Fast!

[Go to Project Page]


uvumitools-crop UvumiTools Crop is a professional and easy to use image cropper script.

A quick feature list
* Set minimum sizes of the selected area
* Keep aspect ratio (or not)
* Real time preview
* Support HTML Resizing
* Callback function
* Can be toggled on and off
* Modify style with CSS
* Fast, even on slow computers
* Change image insider the cropper on the fly

[Go to project page]

JavaScript Image Cropper UI, using Prototype & script.aculo.us allows the user to crop an image using similar features found in commercial image editing software.

screenshot_thumb

Features
* Un-obtrusive
* Based on Prototype and script.aculo.us
* Image editing package styling & functionality, the crop area functions and looks like those found in popular image editing software
* Dynamic inclusion of required styles
* Drag to draw areas
* Shift drag to draw/resize areas as squares
* Selection area can be moved
* Selection area can be resized using resize handles
* Allows dimension ratio limited crop areas
* Allows minimum dimension crop areas
* Allows maximum dimensions crop areas, if both min & max set as the same value then we’ll get a fixed cropper size on the axes as appropriate and the resize handles will not be displayed as appropriate
* Allows dynamic preview of resultant crop (if minimum width & height are provided), this is implemented as a subclass so can be removed if not required
* Movement of selection area by arrow keys (shift + arrow key will move selection area by 10 pixels)
* All operations stay within bounds of image

Browser compatibility
* PC: IE 6 & 5.5, Firefox 1.5, Opera 8.5 (see known issues) & 9.0b
* MAC: Camino 1.0, Firefox 1.5, Safari 2.0

[Go to Project Page | View Demo]

"Subscribe to the blog"
Receive an update straight to your inbox every time I publish a new article. Your email address will never be shared

3 Replies to "Image Cropping with jQuery, MooTools, Prototype & script.aculo.us"

  1. All are fine.
    I am using ImgAreaSelect
    working well.
    But i need a functionality in jquery to zoom. i dont want to add another plugin for this purpose so if i could get both zoom and crop then that would be a complete cropping mechanism. currently i am using javascript to zoom which is a tedious process. may be in should convert it to a plugin. so which other jquery plugins does both the function. Or even if there is just another zoom tool then i can combine both so that it will save a lot of my javascript coding time.

    1. did you ever find a solution for the “zoom + crop”… its driving me crazy!!!

  2. I wrote my own zoom and cropping javascript. After uploading an image i display it in a popup div. i zoom it when i click the plus and minus buttons in the popup and according to the ratio or zoom and the image select area i do the cropping using php gd. I am using it in a project but still i need to mend it to perfection.

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)