Crop and upload images using PHP, jQuery, and imgAreaSelect

& Nbsp; prepare PHP4 or later PHPGD Library jQueryver1.2.3 & nbsp; or higher ImageAreaSelect & nbsp; ins & nbsp; encoding 1. Wewillbeusingthesessionvariabletoholdtheran

? Preparation

• PHP 4 or later
• Php gd Library
• JQuery ver 1.2.3? Or higher
• Image Area Select? Plug-ins

? Encoding

1. We will be using the session variable to hold the random file name (in our case the timestamp ).
We are now also storing the file extension that is passed through the script, to ensure we are dealing with the right type of image.

//only assign a new timestamp if the session variable is emptyif (strlen($_SESSION['random_key'])==0){    $_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s')); //assign the timestamp to the session variable    $_SESSION['user_file_ext']= "";}

NOTE:? Once the thumbnail is created we set the session variable to equal nothing, this will then allow a new image to be uploaded along with a new name.

2. Capture, rename and resize the uploaded file.
The validation section has also been updated and been made more secure by checking the mime type as well as the image extension.

foreach ($allowed_image_types as $mime_type => $ext) {//loop through the specified image types and if they match the extension then break out//everything is ok so go and check file sizeif($file_ext==$ext && $userfile_type==$mime_type){    $error = "";    break;}else{    $error = "Only ".$image_ext." images accepted for upload";}}//check if the file size is above the allowed limitif ($userfile_size > ($max_file*1048576)) {    $error.= "Images must be under ".$max_file."MB in size";}

3. Same as before, we grab the coordinates using the imgAreaSelect plugin and send the details to the server.

• X1, y1? = Coordinates of the top left corner of the initial selection area
• X2, y2? = Coordinates of the bottom right corner of the initial selection area
• Width? = Crop selection width
• Height? = Crop selection height

There are a number of options with this plugin which you can see the link above. we opted for an aspect ratio of 1:1 (height and width of 100px) along with a preview of what we are actually going to crop.

NOTE:? Using the php calculation below makes the script that much more dynamic, all you now have to do is set the height and width of your thumbnail and the script will calculate the ratio/preview sizes for you! (Thanks to Long for the tip .)

$(window).load(function () {$("#thumbnail").imgAreaSelect({ aspectRatio: "1:thumb_height/thumb_width", onSelectChange: preview });});

The preview function below, is run as soon as you create your selection. this places the right part of the image into the preview window. the second part of the function populates hidden fields which are later passed to the server.

function preview(img, selection) {    var scaleX = / selection.width;    var scaleY = / selection.height;    $('#thumbnail + div > img').css({        width: Math.round(scaleX * ) + 'px',        height: Math.round(scaleY * ) + 'px',        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'    });    $('#x1').val(selection.x1);    $('#y1').val(selection.y1);    $('#x2').val(selection.x2);    $('#y2').val(selection.y2);    $('#w').val(selection.width);    $('#h').val(selection.height);}

This function is not really required, but helps by checking to see if the user has made a crop selection. in our case it is a required step. the form is submitted if the values exist, I. e. a selection has been made.

$(document).ready(function () {    $("#save_thumb").click(function() {        var x1 = $("#x1").val();        var y1 = $("#y1").val();        var x2 = $("#x2").val();        var y2 = $("#y2").val();        var w = $("#w").val();        var h = $("#h").val();        if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){            alert("You must make a selection first");            return false;        }else{            return true;       }    });});

4. Finally it's time to handle these new coordinates and generate our new cropped thumbnail.

if (isset($_POST["upload_thumbnail"])) {    //Get the new coordinates to crop the image.    $x1 = $_POST["x1"];    $y1 = $_POST["y1"];    $x2 = $_POST["x2"]; // not really required    $y2 = $_POST["y2"]; // not really required    $w = $_POST["w"];    $h = $_POST["h"];    //Scale the image to the 100px by 100px    $scale = $thumb_width/$w;    $cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);    //Reload the page again to view the thumbnail    header("location:".$_SERVER["PHP_SELF"]);    exit();}

Take a look at the demo and download a copy to see the full working code.

So far we have tested it in FireFox 2 and 3, Internet Explorer 6 and 7 and Safari 3.1.2 with pretty good results. the only issue we found was when uploading transparent gifs and pngs results in a black background.

? Demo

Click here to see it in action