Crop Image with Yahoo & jQuery Library in PHP

Hello,
In this article I will show how to crop image in PHP. I have also used Yahoo & jQuery, prototype library to do this. Let’s begin our tutorial:

Files Structure for this package:

  • Index.php
  • crop_image.php
  • cropper.php
  • css/chooser.min.1.5.css
  • css/cropper.min.1.2.css
  • js/carousel.min.1.12.js
  • js/cropper.min.1.4.js
  • js/ toolkit.events.min.1.0.js
  • js/ yahoo-min.js
  • media/images
  • media/temp

Lets create a form in the “index.php” file so that we can browse an image to crop. Use the below code:

        <form action=”crop_image.php” method=”post” enctype=”multipart/form-data”>
<label for=”img_file”>Browse Image:</label>
<input type=”file” name=”img_file” id=”img_file” value=”” />
<input type=”submit” value=”Submit” />
</form>

In the form we give the “crop_image.php” file in the action. You must add enctype to work with files. In the file we uploaded the image in a temporary location and show that for cropping. Let’s check the code:

<?php
$dest_loc = “media/images/”;
$dest_loc_temp = “media/temp/”;//FOLDER PATH WHERE THE IMAGE TEMPORARY SAVED

$imgsName = “”;
$temp_img_path = “”;

$file_validation = true;
if(!(($_FILES[“img_file”][“type”] == “image/gif”) || ($_FILES[“img_file”][“type”] == “image/jpeg”))) {
$file_validation = “Invalid File Type, Please browse only .gif, .jpg”;
} else if ($_FILES[“img_file”][“size”] > 20000) {
$file_validation = “File Size is too Big, Please browse less then 2mb image”;
}

$imgsName = $_FILES[“img_file”][“name”];//GET THE IMAGE NAME
$temp_img_path = $dest_loc_temp . $imgsName;//GET THE IMAGE PATH UPLOADED TEMPORARY

if ($file_validation) {
if ($_FILES[“img_file”][“error”] > 0) {
echo “Error:” . “<br />”;
} else {
if (file_exists($temp_img_path)) {
echo “Warning ::  ” . $imgsName . ” already exist” . “<br />”;
} else {
move_uploaded_file($_FILES[“img_file”][“tmp_name”], $temp_img_path);
}
}
} else {
echo $file_validation;
}
$destIMG = $dest_loc . $imgsName;
$size = getimagesize($temp_img_path);
$width = $size[0];
$height = $size[1];
$imgExt = str_replace(“.”,””,strtolower(substr($imgsName,strrpos($imgsName,”.”))));
?>

 

In first two line we define temporary and permanent location to upload image file.  After checking the file type and size we store the image name as $imgsName = $_FILES[“img_file”][“name”];

file_exists():
The file_exists() function is used to check whether the file is exist or not in the given parameter location.

move_uploaded_file():

The move_uploaded_file() function is used to move the image from temp to our temporary location.

Add the CSS and Js files:

    <link rel=”stylesheet” type=”text/css” href=”css/chooser.min.1.5.css”>
<link rel=”stylesheet” type=”text/css” href=”css/cropper.min.1.2.css”>

<script type=”text/javascript” src=”js/toolkit.events.min.1.0.js”></script>
<script type=”text/javascript” src=”js/cropper.min.1.4.js”></script>
<script type=”text/javascript” src=”js/yahoo-min.js”></script>
<script type=”text/javascript” src=”js/carousel.min.1.12.js”></script>
<script>
YAHOO.yIdPhotoChooser.dialogHandlers.fitDialog();
</script>

 

It’s time to show the image uploaded at temporary location. And submit image information after cropping. Check the below code:

<div id=”yIdPhotoCropImage”>
<table border=”0″ cellpadding=”0″ cellspacing=”5″>
<tbody>
<tr>
<td>
<div id=”divCropImageBorder”>
<div id=”cropImageContainer”>
<img id=”cropImage” src=”<?php echo $temp_img_path;?>” alt=”Image that you uploaded to crop.” height=”<?php echo $height;?>” width=”<?php echo $width;?>”>
<div style=”left: 50px; top: 69px; width: 100px; visibility: visible; cursor: default;” id=”divSelectionTop”></div>
<div style=”left: 149px; top: 69px; height: 100px; visibility: visible; cursor: default;” id=”divSelectionRight”></div>
<div style=”left: 50px; top: 168px; width: 100px; visibility: visible; cursor: default;” id=”divSelectionBottom”></div>
<div style=”left: 50px; top: 69px; height: 100px; visibility: visible; cursor: default;” id=”divSelectionLeft”></div>
<div style=”left: 50px; top: 69px; visibility: visible;” id=”divUlCorner”></div>
<div style=”left: 142px; top: 69px; visibility: visible;” id=”divUrCorner”></div>
<div style=”top: 161px; left: 50px; visibility: visible;” id=”divLlCorner”></div>
<div style=”top: 161px; left: 142px; visibility: visible;” id=”divLrCorner”></div>
<img style=”clip: rect(69px, 150px, 169px, 50px); visibility: visible;” src=”<?php echo $temp_img_path;?>” id=”imageCropSelection”>
<div style=”width: <?php echo $width;?>px; height: <?php echo $height;?>px; visibility: visible;” id=”divShield”></div>
</div>
</div>
</td>
<td style=”padding-left: 12px; padding-top: 4px; vertical-align: top;”>
<form id=”cropForm” action=”index.php” method=”post”>
<input value=”<?php echo $width;?>” name=”imageW” id=”imageW” onChange=”Cropper.formResetImgW();” type=”hidden”>
<input value=”<?php echo $height;?>” name=”imageH” id=”imageH” onChange=”Cropper.formResetImgH();” type=”hidden”>
<input value=”50″ name=”cropX” id=”cropX” onChange=”Cropper.formSetX(this.value);” type=”hidden”>
<input value=”69″ name=”cropY” id=”cropY” onChange=”Cropper.formSetY(this.value);” type=”hidden”>
<input value=”100″ name=”cropW” id=”cropW” onChange=”Cropper.formSetW(this.value);” type=”hidden”>
<input value=”100″ name=”cropH” id=”cropH” onChange=”Cropper.formSetH(this.value);” type=”hidden”>
<input value=”<?php echo $temp_img_path;?>” name=”sourceIMG” id=”sourceIMG” type=”hidden”>
<input value=”<?php echo $destIMG;?>” name=”destIMG” id=”destIMG” type=”hidden”>
<input value=”<?php echo $imgExt;?>” name=”imgtype” id=”imgtype” type=”hidden”>
<input type=”submit” name=”cropping” value=”Crop Image”>
</form>
</td>
</tr>
</tbody>
</table>
</div>

 

Above code will generate output as below screen shot:

image crop example

In the “cropForm form” we give the “index.php” file as action. So, we need to add some script to process post data. Check below:

<?php
if(isset($_POST[‘cropW’]) && isset($_POST[‘sourceIMG’])) {
include “cropper.php”;
?>
<div style=”margin-top:5px;”>
<img src=”<?php imageCropper::cropMyImage(); ?>” width=”<?php echo $_POST[‘cropW’]; ?>” height=”<?php echo $_POST[‘cropH’]; ?>” />
</div>
<?php
}
?>

 

Firstly check if the data submitted or not. If submitted then include the “cropper.php” file that holds a class to process the image cropping. To crop image and show we will call the cropMyImage() function in the image src. Lets check the script of “cropper.php”.

<?php
class imageCropper {
function cropMyImage() {
$cropW = $_POST[‘cropW’];
$cropH = $_POST[‘cropH’];
$cropX = $_POST[‘cropX’];
$cropY = $_POST[‘cropY’];
$imageW = $_POST[‘imageW’];
$imageH = $_POST[‘imageH’];
$sourceIMG = $_POST[‘sourceIMG’];
$imgtype = $_POST[‘imgtype’];
$destIMG = $_POST[‘destIMG’];

switch($imgtype) {
case ‘gif’:
$simg = imagecreatefromgif($sourceIMG);
break;
case ‘jpg’:
$simg = imagecreatefromjpeg($sourceIMG);
break;
case ‘png’:
$simg = imagecreatefrompng($sourceIMG);
break;
}
$dimg = imagecreatetruecolor($cropW, $cropH);
imagecopyresized($dimg,$simg,0,0,$cropX,$cropY,$imageW,$imageH,$imageW,$imageH);
imagejpeg($dimg,$destIMG,100);

echo $destIMG;
}
}
?>

“cropper.php” file contain a class with cropMyImage() function. In the cropMyImage() function firstly get the data that submitted from “crop_image.php”. In the while loop we use imagecreatefromgif() to confirm which type of image need to be create.

  • The imagecreatetruecolor() function create a new true color image.
  • The imagecopyresized() function copy and resize part of an image.
  • The imagejpeg() function used to output image to browser or file.

 

Let me know if you have any confusion about the steps regarding to this tutorial. You can also download the full package by clicking here, Enjoy!!!

 

Author Info

Shah Alom

Hi, This is Mohammad Shah Alom, My passion is Programming & Web Development. I am Founder of Micro Solutions Bangladesh. My Facebook profile shahalom1983 & Twitter Profile shahalom_83