Nio’s Weblog

JavaScript Image Cropper UI

Posted on 5th July 2007 by Nio in JavaScript, 程序人生

JavaScript Image Cropper UI，一个用 JavaScript 实现的超酷的图片裁剪器，基于 Prototype 和 script.aculo.us 实现的，效果很不错，也很使用。看看 DEMO 吧，呵呵。

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
All functionality & display compatible with most popular browsers supported by Prototype, tested in:

No comments yet.