Home Tutorials Php Upload and Crop Image using jQuery plug-in & PHP

Upload and Crop Image using jQuery plug-in & PHP

Posted in : PHP Posted on : January 17, 2011 at 6:31 PM Comments : [ 0 ]

This section contains the detail about the Upload and Crop Image using jQuery plug-in & PHP.

Upload and Crop Image using jQuery plug-in & PHP

In this section you will learn how to create a application in which you can upload image and crop it and save both the image in a folder. You can also delete both these images (cropped & uploaded image) from this folder by clicking on a "delete" hyperlink simply. This application uploads and crops only jpg/jpeg images.

For the whole process, we are using a single PHP file. Given below code with their application in the code is shown :

The html form for uploading image :

<h2>Upload Photo</h2>
<p><i>Note- Only Jpeg/Jpg extension file is supported.</p></i>
<form name="photo" enctype="multipart/form-data" action="
<?php echo $_SERVER["PHP_SELF"];?>" method="post">
Photo <input type="file" name="image" size="30" />
<input type="submit" name="upload" value="Upload" />
</form>

The PHP code for image upload :

if (isset($_POST["upload"])) {
//Get the file information
$userfile_name = $_FILES["image"]["name"];
$userfile_tmp = $_FILES["image"]["tmp_name"];
$userfile_size = $_FILES["image"]["size"];
$filename = basename($_FILES["image"]["name"]);
$file_ext = substr($filename, strrpos($filename, ".") + 1);

//Only process if the file is a JPG and below the allowed limit
if((!empty($_FILES["image"])) && ($_FILES["image"]["error"] == 0)) {
if (($file_ext!="jpg") && ($userfile_size > $max_file)) {
$error= "ONLY jpeg images under 1MB are accepted for upload";
}
}else{
$error= "Select a jpeg image for upload";
}
//Everything is ok, so we can upload the image.
if (strlen($error)==0){

if (isset($_FILES["image"]["name"])){

move_uploaded_file($userfile_tmp, $large_image_location);
chmod ($large_image_location, 0777);

$width = getWidth($large_image_location);
$height = getHeight($large_image_location);
//Scale the image if it is greater than the width set above
if ($width > $max_width){
$scale = $max_width/$width;
$uploaded = resizeImage($large_image_location,$width,$height,$scale);
}else{
$scale = 1;
$uploaded = resizeImage($large_image_location,$width,$height,$scale);
}
//Delete the thumbnail file so the user can create a new one
if (file_exists($thumb_image_location)) {
unlink($thumb_image_location);
}
}
//Refresh the page to show the new uploaded image
header("location:".$_SERVER["PHP_SELF"]);
exit();
}
}

Now that the image has been uploaded and saved to our folder we can use the Image Area Select plug-in 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

The JQuery script to preview the selected region & setting co-ordinate to the form is given below :

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);
}

The below jQuery function is required for checking whether the selection for crop is made or not :

$(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;
}
});
});

The html form for sending the co-ordinate using hidden form feild :

<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="hidden" name="x1" value="" id="x1" />
<input type="hidden" name="y1" value="" id="y1" />
<input type="hidden" name="x2" value="" id="x2" />
<input type="hidden" name="y2" value="" id="y2" />
<input type="hidden" name="w" value="" id="w" />
<input type="hidden" name="h" value="" id="h" />
<input type="submit" name="upload_thumbnail" value=" Crop Image " id="save_thumb"/>
</form>

The given below code is 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 = 100/$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();
}