- Menu scripts
- Window scripts
- Calendar scripts
- Gallery scripts
- Form widgets
- Tab view scripts
- Table widgets
- Drag and drop
- Folder trees
- AJAX scripts
- Content Effects
- Misc scripts
- Chess widgets
- DHTML Suite
New on DHTMLGoodies.com:
DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.
Download image crop script
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/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
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:
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
- 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.