Download image crop script

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download files

You can download the entire script from this Zip file.

Files included in package

image-crop.html = Main HTML file
crop_image.php = PHP used to crop the image
js/image-crop.js = Main Javascript file for this script
js/xp-info-pane.js = Left blue panel
js/ajax.js = Ajax (SACK library)
images/ = Images used by the script
demo-images/ = Nature images used in this demo
css/ = Cascading style sheet for the left blue panel and the crop script

Configuration

Step 1: Define image and image size

The first thing you have to do is to specify which image you wan't to crop. The path/reference to the image is defined at the bottom of image-crop.html:

and a little further below:

Here I'm cropping the image images/nature.jpg which is based on the original image demo-images/nature-orig.jpg. This hidden input("input_image_ref") may also be an id representing the image. That's the safest method. Example: input_image_ref = 1. 1 will be sent by Ajax to crop_image.php. crop_image.php will do a query to a database and return the path to the image where ID = 1.

At the top of image-crop.html, you'll have some variables which you have to modify:

var crop_script_alwaysPreserveAspectRatio = false; // Always preserve aspect ratio
var crop_script_fixedRatio = false; // Width relative to height 2 = ratio 2:1
var crop_script_server_file = 'crop_image.php';

var cropToolBorderWidth = 1; // Width of dotted border around crop rectangle
var smallSquareWidth = 7; // Size of small squares used to resize crop rectangle

// Size of image shown in crop tool
var crop_imageWidth = 600;
var crop_imageHeight = 450;

// Size of original image
var crop_originalImageWidth = 2272;
var crop_originalImageHeight = 1704;

var crop_minimumPercent = 10; // Minimum percent - resize
var crop_maximumPercent = 200; // Maximum percent -resize

var crop_minimumWidthHeight = 15; // Minimum width and height of crop area

var updateFormValuesAsYouDrag = true; // This variable indicates if form values should be updated as we drag. This process could make the script work a little bit slow. That's why this option is set as a variable.
if(!document.all)updateFormValuesAsYouDrag = false; // Enable this feature only in IE

The most important variables are crop_imageWidth,crop_imageHeight,crop_originalImageWidth and crop_originalImageHeight. These 4 variables defines the size of the image you'll see in the crop tool(crop_imageWidth and crop_imageHeight) and the size of the original image(crop_originalImageWidth and crop_originalImageHeight). Usually, the original image is bigger than the one you see in this tool. These 4 variables makes it possible to show correct values inside the form(x,y,width and height)

Preserve aspect ratio

You can preserve aspect ratio of the rectangle when you drag. This is done by setting the variable crop_script_alwaysPreserveAspectRatio to true. You should also know that aspect ratio is preserved if you hold down the Ctrl key while dragging.

Step 2: Configure image crop software on the server

crop_image.php is the file used to crop the image. Ajax contacts this data with crop data. The file uses ImageMagick to convert your image and sends the cropped version back to the browser.

What you have to do is to make sure that ImageMagick is installed on your server(If not, you can download it from imagemagick.org).

You also have to make some modifications to this script so that:

Path to image magick is correct
Make path to converted file dynamicly. The file is currently producing the same file name for all files

Update log

May, 22nd 2006 : Added support for fixed aspect ratio, i.e. of crop rectangle. Hold down the ctrl key while dragging or specify a fixed cropping ratio in the top of image-crop.js
August, 9th, 2006 : Added a fix to the preserve aspect ratio feature ( Thanks to Urko Benito)
August, 11th, 2006 : If fixed ratio is set, resize crop area initially
August, 20th, 2008: Security bugfix - Using POST method to post variables and secure the ImageMagick command string before executing it on the server
August, 28th, 2008: Resize bugfix - Due to a problem with fixed aspect ratio, the entire code for resizing the rectangle has been more or less rewritten from scratch.