HTML PHP CSS Web 2.0

JavaScript Image Cropper UI, using Prototype & script.aculo.us

The JavaScript image cropper UI allows the user to crop an image using an interface with the same features and styling as found in commercial image editing software, and is based on the Prototype JavaScript framework and script.aculo.us.

Initially I performed quite a lot of searching for some ready made solutions to meet my requirements, but found none that had the complete feature set that I required or any complete versions based on Prototype.

Features

Screen shot of cropper in action

* 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
* All functionality & display compatible with most popular browsers supported by Prototype, tested in:
o PC: IE 6 & 5.5, Firefox 1.5, Opera 8.5 (see known issues) & 9.0b
o MAC: Camino 1.0, Firefox 1.5, Safari 2.0

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/