In dynamic web sites we let our users to upload their own images. Most of the times we resize and decrease the quality of the image for optimization purpose. But sometimes this is not enough. When you need a standardization for image size, you look for ways to make cropping operations. In this article I will share how I made cropping for my website using;

• PHP
• jsCropperUI [Download] | [Preview]

The jsCropperUI will help us :

• to provide users to select the area to be cropped
• get the selected area’s cordinates to our web server.

If you have downloaded the jsCropperUI, take your time on testing the javascript and until you succeed with submitting the coordinates. From this point I will assume that you have the image stored in your web server and you have got the selected area’s coordinates in web server.

In order to understand the algorithm I suggest you to check the algorithm demonstration on Scratt below

Here is the php class that I wrote to crop images.

/*
* Image Cropping utility
* by Cihan Necat KAVİ  [ me@cihannecatkavi.com ]
*/
class ImageCroppingUtils
{

public static function getImageAsResource(string $imgAdress)
{

try
{

$fileextension = pathinfo($imgAdress,PATHINFO_EXTENSION);
$simg=null;
switch($fileextension)
{

case 'gif':
{
$simg = imagecreatefromgif($imgAdress);
break;
}
case 'jpg':case'jpeg':
{
$simg = imagecreatefromjpeg($imgAdress);
break;
}
case 'png':
{
$simg = imagecreatefrompng($imgAdress);
break;
}
default:
{
throw  new Exception("Error while trying to get image as resource(format not supported)");
}
}

}
catch(Exception $er)
{
throw  new Exception("Error while trying to get image as resource Message::".$er->getMessage());
}

return  $simg;
}

// this function can be used to crop image files
public static function cropImage(string $source,int $x1,int $y1,int $x2,int $y2) {

$simg = null;

try
{
$simg = ImageCroppingUtils::getImageAsResource($source);
}
catch(Exception $er)
{
throw new Exception ("Image file could not be found while getting the source image to be crop");
return;
}

list($w, $h) = getimagesize($source);

$crop1x = $w-($x2-$x1);
$crop1y = $h-($y2-$y1);

$tmpImg = imagecreatetruecolor($w, $h);
$finalImg = imagecreatetruecolor(($x2-$x1), ($y2-$y1));

imagecopyresampled($tmpImg,$simg,$crop1x,$crop1y,$x1,$y1,$w,$h,$w,$h);
imagecopyresampled($finalImg,$tmpImg,0,0,$crop1x,$crop1y,$w,$h,$w,$h);

return $finalImg;

}}

As you can see there are two functions. First one is to get the source image as resource. The second, is the core function cropping the image.

The cropImage functions is returning resource so after this if we are done with the image we may save it to disk.
(ex: using imagejpeg($image_resource, “test.jpg”) )

Here is a sample usage of the class:

/*Before starting I am assuming that you have the adress of the source image
and the coordinates as I stated above.
*/

$sourceImageAdress = "test.jpg";

// the parameters here are sample inputs.
$finalImage = ImageCroppingUtils::cropImage("test.jpg",10,5,15,20);

//here we save the final image
imagejpeg($finalImage, "Croppped_test.jpg");

And we are done İf I have time I will provide more details for this article. I ll be happy to recieve suggestions or questions. Hope this articles helps you.