PHP & jQuery image upload and crop v1.1
Update
Due to popular demand, further updates have been made to this script, to allow upload of JPG, GIFs and PNG images! Same great functionality now even more useful.
Please note the old script is still available at PHP & jQuery image upload and crop.
If you are not familiar with the concept, it may be worth reading the old article first.
Fixes
- You can now upload different types of images, JPG, GIFs and PNG
- You can now upload images and have a random file name (this fixes the caching issue some of you have had)
- The image upload error check has been fixed (thanks to DevWooty)
As with the previous script, ensure you have the following:
- PHP 4 or Higher (It has been tested on Version 5)
- PHP GD Library
- jQuery ver 1.2.3 or Higher
- Image Area Select plugin by Michal Wojciechowski
Basic overview
1. We will be using the session variable to hold the random file name (in our case the timestamp).
We are now also storing the file extension that is passed through the script, to ensure we are dealing with the right type of image.
//only assign a new timestamp if the session variable is empty
if (strlen($_SESSION['random_key'])==0){
$_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s')); //assign the timestamp to the session variable
$_SESSION['user_file_ext']= "";
}
NOTE: Once the thumbnail is created we set the session variable to equal nothing, this will then allow a new image to be uploaded along with a new name.
2. Capture, rename and resize the uploaded file.
The validation section has also been updated and been made more secure by checking the mime type as well as the image extension.
foreach ($allowed_image_types as $mime_type => $ext) {
//loop through the specified image types and if they match the extension then break out
//everything is ok so go and check file size
if($file_ext==$ext && $userfile_type==$mime_type){
$error = "";
break;
}else{
$error = "Only ".$image_ext." images accepted for upload";
}
}
//check if the file size is above the allowed limit
if ($userfile_size > ($max_file*1048576)) {
$error.= "Images must be under ".$max_file."MB in size";
}
3. Same as before, we grab the coordinates using the imgAreaSelect plugin and send the details to the server.
- 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.
NOTE: Using the php calculation below makes the script that much more dynamic, all you now have to do is set the height and width of your thumbnail and the script will calculate the ratio/preview sizes for you! (Thanks to Long for the tip.)
$(window).load(function () {
$("#thumbnail").imgAreaSelect({ aspectRatio: "1:thumb_height/thumb_width", onSelectChange: preview });
});
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 = / selection.width;
var scaleY = / selection.height;
$('#thumbnail + div > img').css({
width: Math.round(scaleX * ) + 'px',
height: Math.round(scaleY * ) + '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.
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 = $thumb_width/$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();
}
Take a look at the demo and download a copy to see the full working code.
So far we have tested it in FireFox 2 and 3, Internet Explorer 6 and 7 and Safari 3.1.2 with pretty good results. The only issue we found was when uploading transparent gifs and pngs results in a black background.
The demo
Click here to see it in action
Download
Click here to download v1.2 [JPG, GIF, PNG]
Click here to download v1.1 [JPG ONLY]
Found this article useful? Did it save you time?
Tags: crop, gd, image, Jquery, PHP, upload
Blogsphere: TechnoratiFeedsterBloglines
Bookmark: Del.icio.usSpurlFurlSimpyBlinkDigg
RSS feed for comments on this post
I like this script and is very informative and customizable..but is ther a way to delete the original image or the image with resize prefix to be deleted as i would like to have only thumbnail image in my server –I am unable to locate the correct place to unlink the image so that I have only thumbnail image in my server folder…
Thank you in advance.
I’m being driven mad by this application. I’ve tried tweaking several elements and I continue to get basically the error below constantly. I’d love some help!
Warning: move_uploaded_file(C:/htdocs/Powweb-Files/images/photogallery/photos/upload_pic/resize_1248575460.jpg) [function.move-uploaded-file]: failed to open stream: No such file or directory in C:\htdocs\Powweb-Files\apps\jquery_upload_cropv1.2\upload_crop_v1.2.php on line 214
Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move ‘C:\WINDOWS\Temp\php86.tmp’ to ‘C:/htdocs/Powweb-Files/images/photogallery/photos/upload_pic/resize_1248575460.jpg’ in C:\htdocs\Powweb-Files\apps\jquery_upload_cropv1.2\upload_crop_v1.2.php on line 214
Warning: chmod() [function.chmod]: No such file or directory in C:\htdocs\Powweb-Files\apps\jquery_upload_cropv1.2\upload_crop_v1.2.php on line 215
Warning: getimagesize(C:/htdocs/Powweb-Files/images/photogallery/photos/upload_pic/resize_1248575460.jpg) [function.getimagesize]: failed to open stream: No such file or directory in C:\htdocs\Powweb-Files\apps\jquery_upload_cropv1.2\upload_crop_v1.2.php on line 145
Warning: getimagesize(C:/htdocs/Powweb-Files/images/photogallery/photos/upload_pic/resize_1248575460.jpg) [function.getimagesize]: failed to open stream: No such file or directory in C:\htdocs\Powweb-Files\apps\jquery_upload_cropv1.2\upload_crop_v1.2.php on line 139
Warning: getimagesize(C:/htdocs/Powweb-Files/images/photogallery/photos/upload_pic/resize_1248575460.jpg) [function.getimagesize]: failed to open stream: No such file or directory in C:\htdocs\Powweb-Files\apps\jquery_upload_cropv1.2\upload_crop_v1.2.php on line 58
Warning: imagecreatetruecolor() [function.imagecreatetruecolor]: Invalid image dimensions in C:\htdocs\Powweb-Files\apps\jquery_upload_cropv1.2\upload_crop_v1.2.php on line 62
Warning: imagecopyresampled(): supplied argument is not a valid Image resource in C:\htdocs\Powweb-Files\apps\jquery_upload_cropv1.2\upload_crop_v1.2.php on line 77
Warning: chmod() [function.chmod]: No such file or directory in C:\htdocs\Powweb-Files\apps\jquery_upload_cropv1.2\upload_crop_v1.2.php on line 94
Warning: Cannot modify header information – headers already sent by (output started at C:\htdocs\Powweb-Files\apps\jquery_upload_cropv1.2\upload_crop_v1.2.php:214) in C:\htdocs\Powweb-Files\apps\jquery_upload_cropv1.2\upload_crop_v1.2.php on line 233
A couple of people have asked about saving the created thumbnail location into a MySQL database. Has anybody got this working? And if so, would you mind sharing here what you did to get it working?
Awesome man!
Congratulations, good work.
Hello everyone.
The script is fantastic, but there is a problem.
By uploading files with jpeg extension crashes.
Any suggestions?
Excuse my bad English!
Nice, but no work in ie6… =\ i know it is dead, or will dead, but some clients keeping using the DEVIL ie6 *cry* , but NICEEEE WORK!!!!
Hello
I have a problem with cropping the images. the parameters that i sending to function that crops the image (resizeThumbnailImage) are correct, but the cropping is not correct
What can be the problem? everything looks correct
Thanks a lot. Great script
Script works great, except for in IE (primarily IE8). Has anyone found a fix for IE 8 yet?
Thank you! I’m new to php and this has been a wonderful introduction. I’ve enjoyed reading and playing with such a nice script!
I’ve got it working with MySQL to make a gallery of sorts.
how can i store the original image on the server? next to the resized and the thumbnail. i am desperately searching for a solution. thanks. flo
Hi. I want ask if somebody have this script conected to the database.
You choose image from database crop it and save thumbnail location to database.
lateNIGHT i have the same question, but tomorrow ill try to make it work, JC says that he could so maybe we could too
PD: An example with mysq and PHP ill be very usefull.
Hi, your code is AWESOME!
I’m trying to figure out how to get the the code to automatically create a thumbnail on upload instead of having the user manually configure(which I want to leave optional). Could you point me in the right direction?
Thanks!
@Le, the code already resizes the original image on upload, to further reduce the size, you could call the thumbnail function giving specific height, width, and x1, y1 values
# $scale = 100/$NEW_w;
# $cropped = resizeThumbnailImage($NEW_thumb_image_location, $large_image_location,$NEW_w,$NEW_h,$NEW_x1,$NEW_y1,$scale);
Obviously there will be more tweaks needed but this will point you in the right direction.
Can this be modified to allow the user to upload more than one file at a time?