',"\n", '

Image Cropping Error

',"\n"; foreach($imgData['errors'] as $err) echo '

',$err,'

',"\n"; echo '

',"\n", '

Image Cropping Successful

',"\n", '

Below is the resulting image from your crop selection.

',"\n", '

',"\n", '

',"\n", '

ERROR Uploading File

',"\n", '

',"\n", ' You did not upload a valid image file. Please note the errors listed below and try again or report',"\n", ' them to Justin.',"\n", '

',"\n", '

',"\n", '

STEP 2: Define Your Image Cropping Selection

',"\n", '

',"\n", ' To select your image crop area, click the opposite diagonal corners of the area you want to keep.',"\n", ' A blue selection box should appear. If the selection isn\'t where you want it, click the image again to clear the selection and try again.',"\n", ' When you have your selection in the correct position, click the "Crop Image" button and the image will then be cropped to your selection.',"\n", '

',"\n", '

',"\n", ' ',"\n", ' ',"\n", '

',"\n", '

ERROR Uploading Image

',"\n", '

',"\n", ' There was an error encountered while trying to upload your image file. Please note the errors listed below and try again or report',"\n", ' them to Justin if asked to do so.',"\n", '

',"\n"; $ERR=FALSE; // check if we can write to the target if(!is_writable(dirname(__FILE__).'/'.$filename) || !is_writable(dirname(__FILE__).'/images')){ echo '

Server configuration error... In other words, Justin forgot to set file permissions for the directory where images are stored. Please tell him about it.

',"\n"; $ERR=TRUE; } // check if there was an upload error and report it switch($_FILES['image']['error']){ case UPLOAD_ERR_INI_SIZE: printf('

The uploaded file exceeds the maximum filesize for file uploads of %d MB.

'."\n",ini_get('upload_max_filesize')/1048576); $ERR=TRUE; break; case UPLOAD_ERR_FORM_SIZE: printf('

The uploaded file exceeds the maximum filesize of %d MB for this demonstration.

'."\n",$_POST['MAX_FILE_SIZE']/1048576); $ERR=TRUE; break; case UPLOAD_ERR_PARTIAL: echo '

The uploaded file was only partially uploaded.

',"\n"; $ERR=TRUE; break; case UPLOAD_ERR_NO_FILE: echo '

No file was uploaded.

',"\n"; $ERR=TRUE; break; } if(!$ERR){ echo '

I actually don\'t know what went wrong! Everything looks OK from this end. Try it again, if it still fails, then tell Justin.

'; } echo '

Step 1: Uploading The Image To Crop

First, upload a JPEG or PNG image file from your hard drive that you want to crop. This image will be used in the demonstration for defining the image crop selection area with the Javascript code.

Note that if you upload an image that is wider than this display area (between menus, borders, etc.) then the crop selection may not appear in the correct position on the image. I have not ben able to find a way to detect position changes due to floated elements like the column to the right.',

Updates

As I use this script more and more, I may find bugs or decide to implement something in a different way. When such is the case, I will add a note to this page about the differences since last version (don't expect a detailed changelog though).

• 5/11/2005: Bugs dealing with multiple absolute-positioned elements containing the image have been fixed. New feature added you no longer have to define the crop area from top-left to bottom-right; you can define your bounding points in any order. Additional bugs dealing with the absolute-positioned exist when selection is not made from top-left to bottom-right. Those will be fixed in a future release.

• 3/8/2005: Big changes here. Positioning of the selection area and calculation of the clicks in relation to the image is now calculated differently. It seems to be fairly accurate now, even when you have to scroll to make a click! In the process, the javascript function names were changed as well as the resulting url query string. The PHP function arguements were also changed to match with the new query string.