8 Most Popular JavaScript Image Cropping Scripts


User-generated content on the Web is diversifying from plain text to multimedia content like images, audios and videos. As such, web applications and sites need to cater for easier upload and manipulation of such rich content. Image uploading is pretty much a requirement for a lot of websites and this process which can be easy for most of us can be daunting for non tech-savvy users with no photo editing skills or software. To help them easily manipulate their photos uploaded straight from their camera, browser image editing solutions can be used. Cropping is one of the most used photo manipulation techniques and in this post, we take a look some of the most popular JavaScripts Image Cropping scripts.

UvumiTools Crop

UvumiTools Crop

UvumiTools Crop

UvumiTools Crop is a simple yet sophisticated Mootool plugin for image cropping. It comes with a lot of advanced features like real time preview of the cropped image, lock aspect ratio, minimum size preset, on the fly image change and more. However one of the best thing with this script is that if your image is resized to fit it a document using <img>’s width and height, it will automatically detect the resized image and adjust its cropping control accordingly. This is extremely useful for larger images in your web page. Finally, the author of this tool provides 2 sample PHP cropping scripts that can be called directly from the JavaScript objects. These will allow you to either generate a direct download or save a copy to your web server.

Javascript Image Cropper UI

Javascript Image Cropper UI

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 script.aculo.us. Similar to other image cropping tools, it also supports aspect ratio, minimum and maximum dimension for the crop areas and dynamic image previewing. This UI is compatible with most popular browsers.

Image crop – DHTML user interface

DHTML Image Crop

DHTML Image Crop

This script gives you an Image crop/resize DHTML user interface. It has been developped by DHTMLGoodies, one of the best DHTML providers on the Net. This script has all the basic features required for a perfect image cropping solution. It works by dragging a rectangle around the area you want to crop. Once selected, click the “Crop” button and let Ajax send crop data to the server and the cropped image back to you. PHP uses ImageMagick on the server to crop and convert the image.

Rectangular Marquee Tool

Rectangular Marquee Tool

Rectangular Marquee Tool

Marquee tool is a DHTML application that can save you time and help you in your future projects. It allows you to select rectangular areas on <IMG> or <DIV> elements, calculate selection coordinates, display them or send them to the server. Marquee tool uses a reduced size version of Prototype Javascript library, producing a smaller size, extremely functional and fast loading in browser. The total size of the application is about 50KB.

Kroppr

Kroppr

Kroppr

Kroppr is intended to help webmasters allow their users to manipulate the images available on the site. This script can also rotate, zoom in/out and resize the image. Kroppr is undoubtebly the easiest to install and configure image cropper, however, it is a commercial scripts on sales at $40. The Kroppr scripts are encoded and your server needs to support Ioncube Loader and any GD image processing library.

Lasso.Crop Image Cropping Tool

Lasso.Crop

Lasso.Crop

Lasso.Crop is yet another Mootool based cropping script. It is a simple and extremely easy to use script which works on all modern browsers. Several options like aspect ration, mininum and maximum dimensions, mask color and opacity and boundary box can be configured. Lasso.Crop comes with some preset options to help with usability and provide visual clue to communitate that an image can be cropped. The script works in Firefox, Safari and Internet Explorer 6 and 7.

AJAX image cropper with YUI and PHP

YUI ImageCropper control

YUI ImageCropper control

The Yahoo! User Interface Library (YUI), has a lot of utilities and controls written in JavaScript for manipulating images. Their ImageCropper control, which is still in beta is stable enough to be used in your projects. It provides an interactive  interface for getting the dimensions to crop an image. HTMLBlog.net has an in-depth tutorial to show you how to build an AJAX crop image tool using the image cropper control from YUI library and PHP.

Jcrop

Jcrop

Jcrop

Jcrop is a quick and easy way to add image cropping functionality to your web application.  It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. It attaches unobtrusively to any image and includes API features to create additional interactions.

Related Posts:

8 Responses to “8 Most Popular JavaScript Image Cropping Scripts”

  1. Anton Says:

    My favorite is the “AJAX image cropper with YUI and PHP”. I was looking for a good one and came across this one, it worked directly.

  2. Art2code Says:

    very useful scripts!
    thx!

  3. Elemental Web and Mobile Solutions Says:

    Excellent post, thanks so much, this is definitely something that is going to assist with image uploads and manipulation.

    Thanks again much appreciated!

    Elemental

  4. Very Cool Says:

    Can anybody code it as wordpress plug-in?

  5. Ahmad Permessur Says:

    There are a few image cropping WordPress plugins:

    WP Vivtiger Image Resize: http://wordpress.org/extend/pl.....e-resizer/
    Scissors: http://wordpress.org/extend/plugins/scissors/
    SmartImageResizer – http://averagecoder.net/smarti.....esizer.htm

  6. Cool Says:

    long age search this script php+JavaScript croper . thx!

  7. Kalibutan Says:

    I prefer and my favorite is the Jcrop.
    Very useful and easy to aplly to website.
    Jcrop is possible of many changes and settings.
    Thank you for this magnificent infos.

  8. Bart Says:

    Nice list.

    I liked JCrop until I tested it in IE and it didn’t work. Then in Safari and it didn’t work either… It’s very easy and intuitive but alas, need something that I know will work in all currently used browsers.

Leave a Comment