Download image crop script

Demo

Bookmark and Share

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:

<input type="hidden" id="input_image_ref" value="demo-images/nature_orig.jpg">

and a little further below:

<div id="imageContainer">
<img src="images/nature.jpg">
</div>

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.

Comments

nishant
Not work in IE :(
nishant at 03:43PM, 2011/08/19.
yusuf
dont use ie, who would use it in modern world?
yusuf at 05:01AM, 2014/08/21.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2016 dhtmlgoodies.com