Image Cropping with jQuery, MooTools, Prototype & script.aculo.us
Posted on December 22, 2008, Filled under MooTools, jQuery,
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 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]
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!
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
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.
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]
Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!
- December 22, 2008
- article by Gabriel C.
- Leave a reply!
Related Posts
Image Reflection with jQuery, MooTools and script.aculo.usat January 11, 2009 with 3 comments
How to use the Scroll Effect in jQuery, MooTools and Script.aculo.usat March 16, 2009 with 5 comments
Highlight Elements in Script.aculo.us, jQuery and MooToolsat March 29, 2009 with 1 comment
Carousel Examples: YUI Library, jQuery, MooTools & Prototypeat April 11, 2009
PHP: Cropping a Rectangle Image to Square using GDat October 1, 2008 with 4 comments


