Drag and Move image using jQuery and crop using PHP - Part2

In Part 1 we discussed how to make image draggable using simple jQuery.

In this part we will learn how to save the dragged image using PHP . We will crop the part that is outside our  view port div (which is of resolution 850x600).

First retrieve the original width and height of image. To do this we will use getimagesize function of PHP . It takes file path as input and return the array containing width at index 0 and height at index 1

$file_path="movable.jpg"
$size=getimagesize($file_path);
$width=$size[0];
$height=$size[1];

Get current x and y of image. In the HTML FORM written in Part 1 we have hidden fields with name locationX and locationY containing X and Y co-ordinates respectively.

$x=$_POST["locationX"];
$y=$_POST["locationY"];

Next step is to check if any part of image is outside our bounding box (div). We will do this separately for width(horizontal view) and height (vertical view).

For horizontal view

If sum of current x and width of image is greater than 850. It means we have part of image horizontally outside the box. The next check is to see if x is inside the box. If x is inside the box than we simply subtract the value of x from 850 to get the width of image without the part that is outside box. If none of the previous conditions are true , it means image is completely inside the box and we don't have to crop any part of it thus the new width will be same as image's current width.

if (($x+$width)>850){
    $tWidth=$x>=0?(850-$x):850;
}else{
    $tWidth=$width;
}

For vertical view

Same logic as for horizontal view just replace x with y and width with height and we will compare against 600 instead of 850.

if (($y+$height)>600){
    $tHeight=$y>=0?(600-$y):600;
}else{
    $tHeight=$height;
}

We have new calculated width and height in $tWidth and $tHeight respectively. Lets calculate simply the starting x and y position from which we will start saving the source image to destination image.

$tX=$x>=0?0:($x*-1);
$tY=$y>=0?0:($y*-1);

$tX and $tY contains the starting points in source image from where we will start saving the image to destination.

Now our actual part of saving the image will be done

Opening source file

To open image file we will use imagecreatefrom*** function of PHP. As for simplicity we will only use jpeg version of this function. Which is imagecreatefromjpeg. It takes source file path as a parameter and return the resource that we can use.

$img_r=imagecreatefromjpeg($file_path);

Creating destination image resource

To store image we will create a destination resource to hold our new cropped image. For this we will use imagecreatetruecolor function.It takes width and height as parameter and return black image of specified size.

$dst_r = imagecreatetruecolor($tWidth,$tHeight);

Copying part of source image into destination image

Now we have to copy the cropped part from source image into our destination image .For this we will use imagecopyresampled function. It takes destination image resource, source image resource and rectangular area(x,y,width,height) of both source image and destination image as parameters.

imagecopyresampled($dst_r,$img_r,0,0,$tX,$tY,$tWidth,$tHeight,$tWidth,$tHeight);

Congratulations! we have our cropped image part from $img_r (source image) in $dst_r (destination image).Lets write this cropped part into new file. To do this we will use image*** function. For simplicity we will use imagejpeg version of it. It takes destination image resource, destination file path and jpeg quality as parameters. Jpeg quality is an optional parameter it can range from 0(worst quality small file) to 100(highest quality big file). We will use 90 here.

imagejpeg($dst_r,"cropped.jpg",90);

We have saved our cropped version of original image in "cropped.jpg".