JavaScript Image Cropper UI

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 is based on the Prototype JavaScript framework and Scriptaculous.

The JavaScript Image Cropper UI is Un-obtrusive, and all functionality and display is compatible with most popular browsers. Physically cropping and saving the image should be performed server-side. There are some 3rd party server-side implementations that work with the JavaScript Image Cropper in PHP, Coldfusion and C#.


  • 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, this is implemented as a subclass so can be removed if not required
  • Movement of selection area by arrow keys

Developed by Dave Spurr; JavaScript Image Cropper UI is available for download under the BSD License.  You can find further information, demos & download on JavaScript Image Cropper UI Website.

Stay Updated

If you found this post useful, consider subscribing to our RSS Feed! You can also stay updated by following us on Twitter and Facebook or by subscribing to our FriendFeed.

Bookmark / Share

Bookmark and Share

Read More




Leave Comment


Stay Updated, Subscribe to RSS Feed




Sponsored Links