3. Now that the image has been uploaded and saved to our folder we can use the “Image Area Select” plugin to crop our image.

It basically provides the coordinates to the server to handle the crop.

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 using 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.

Lets break it down, we first set the imgAreaSelect function to the image we want to crop, i.e. the one we just uploaded. As you can see, the aspect ration is set to 1:1, which means we are going to get a square selection. The “onSelectChange” is a callback function which runs the preview function when a change is made to the crop.

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 = 100 / selection.width;

var scaleY = 100 / selection.height;

$(“#thumbnail + div > img”).css({

width: Math.round(scaleX * 200) + “px”,

height: Math.round(scaleY * 300) + “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.