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 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
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 PrototypeJavaScript 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
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
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 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 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
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 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.