PHP & jQuery image upload and crop v1.2

PHP & jQuery image upload and crop v1.1

Update

We are looking for new features to be added to this plugin, please leave your requests in the comments on the following page : JQuery / PHP Upload and Crop – Feature Request

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

  1. You can now upload different types of images, JPG, GIFs and PNG
  2. You can now upload images and have a random file name (this fixes the caching issue some of you have had)
  3. The image upload error check has been fixed (thanks to DevWooty)

As with the previous script, ensure you have the following:

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]

We are looking for new features to be added to this plugin, please leave your requests in the comments on the following page : JQuery / PHP Upload and Crop – Feature Request

94 Responses to “PHP & jQuery image upload and crop v1.2”

  1. I tried your solution, but it doesn’t work for me! is there any other way to fix it?

  2. I have the same problem with firefox 24.0 and safari!

    I tried the two solutions you explain, but it doesn’t work.

    Actually, I have two problems: crop system doesn’t appear

    and the image is stored as “something”.jpg.jpg

    For the second issue I read I have to empty cache. But I have to do it every time and it’s not practical…

    Anyone have an idea? Please help me!!

  3. There are some tutorials out there for the same. But this was well described and simple. Thanks, it really helped.

  4. What a magnificent script, congratulations, works just great!!!

  5. Hi Timo, have you found an answer for this yet!? I am also trying to figure out a way to make the visible full size image being cropped smaller, but only visibly on the screen, without actually resizing the image to a smaller width height.

    I tried setting width and height to the image being cropped but then when i crop, the thumbnail doesnt match the area i selected to crop. please, if anyone can offer any help i would greatly appreciate it!!

  6. Is there a way to like assign a different directory? Something like

    /public_html/root/new_folder_instead_of_default_folder/test/

    And is there a way to assign an actual file name to the uploaded file?

    such as “123.jpg”

    And
    if “123.jpg” exist then allow a new upload or a crop of the image. If
    “123.jpg” doesn’t exist, then allow upload. I’ve tried to do these 2
    things, but I keep getting errors.

  7. Hi. Many thanks for sharing.

    I’m moving to the new version and I’d like to know if it’s possible to alter the code for:

    -to keep the original name of the image (prefix+originalName) instead the session ID.
    -to create not one but two thumbs with two different sizes

    Thanks

  8. I have had this problem:

    Action: Images selected for upload and crop

    Message type: “no files selected” (spanish version)

    Result: Image stored in “upload_pics”, but the crop system doesn’t appears.

    Browser: Google Chrome Versión 28.0.1500.72 m

    FIX: delete the cookie (I did use the extension “Edit This Cookie 1.2.1″ for Chrome)

    Seems there is a problem with the “Delete Images” rutine (see below message by Velvet for a solution)

    Hope this help someone.

    Cheers

  9. Hello and thank you very much. I was wondering if there is a way to have the preview image dynamically size to the crop window? I dont want to have to set oth the height and width of the preview image before the user selects what they want to crop. Is this possible?

  10. Is there a way to disable the resizing of the uploaded file but still giving a smaller window in which to crop the image. Raising the following variable: $max_width , allows me to do the first, the second is a little trickier. I tried giving the images a style with a max-width. But that messed up the preview.

    I’m basically trying to create the normal functionality, only without losing the high resolution.

    Any ideas on how to achieve this?

  11. Seems the upload process was completed but then the crop was abandoned which has resulted in the session not being cleared.

  12. There is a line for resizing JPG that takes a quality parameter (line 125): imagejpeg($newImage,$thumb_image_name,90);

    Change the 90 to 100 for 100% quality.

  13. How can I up the output compression quality? Thanks very much for this. Works great and helped my team with photos for a blog.

  14. Is there any particular reason this script would add the file extension twice?

    I’ve recently been testing the php section of the code and have noticed that I am getting files names such as resize_.png.png

  15. is there a possibilty to integrate with virtuemart for uploading image in a print on demand website ? thx

  16. I had to modify the delete function to clear the session variables, otherwise the upload can stop working without returning any error message. What ends up happening is you hit “Upload”, the images are uploaded, but you are not presented with the crop selection–instead you’ll be returned to the upload form.

    if ($_GET[‘a’]==”delete” && strlen($_GET[‘t’])>0){
    //get the file locations
    $web_image_location = $upload_path.$web_image_prefix.$_GET[‘t’];
    $thumb_image_location = $upload_path.$thumb_image_prefix.$_GET[‘t’];
    if (file_exists($web_image_location)) {
    unlink($web_image_location);
    }
    if (file_exists($thumb_image_location)) {
    unlink($thumb_image_location);
    }

    // Clear session variables – add to fix broken upload
    $_SESSION[‘random_key’]= “”;
    $_SESSION[‘user_file_ext’]= “”;

    header(“location:”.$_SERVER[“PHP_SELF”]);
    exit();
    }

  17. Awesome script, easy to use and easy to understand. Well done – thank you!

  18. I’m also having problems in IE. The cropping rectangle does not appear by default in IE even though it is set to appear and works fine in Firefox. I’ve found that refreshing the browser can suddenly make it appear in IE!

  19. Hi,
    My goal is to have a default selection box (dotted rectangle) visible when the user uploads an image, and have the thumbnail preview show the default selected area by default. I want to size the default selection as a square, with a side being equal to the shorter of the length and width of the original image.

    I’m able to create this default selection correctly. However the thumbnail preview does not show this by default. It shows the top left portion of the original image (100px * 100px).

    If I use my mouse to click on the selection and move it around, as soon as I move it the preview “snaps” to correctly show the selected area. From this point on it works as expected. So my only issue is getting the default preview to accurately reflect the default selection.

  20. Thanks for this great script. I am having a small problem where I can’t upload jpeg images. If I add the mime types and extension for jpeg then it works but I cant then upload jpg files. Please can someone point me in the right direction?

    Thanks :D

  21. Hi there,

    currently using this wonderful script.

    how can i make it work with jpg and jpeg.

    If i change line 44 as above it only allows jpeg

    All the best from Holland

  22. What do you do if the image the person uploads is a wide rectangle, but the marquee is a square. Then the user can only upload a small part of the original image. Can you make it so their is white around the image or something to allow the user to select some white and some of the rest of the image in order to get more of the image but keep the dimension proportional?

    Steve

  23. Hi, I can’t figure out where I can set the thumbnail size.
    these are my values for thumb width & height:

    $thumb_width = “250”; $thumb_height = “265”;

    the preview is absolutely fine but the uploaded thumb has a width of 100px and a height of 106px … so the ratio is fine, but how can I manage it to get a width and height of 250x265px?

    I’ve tried to set the values here:
    $cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,250,256,$x1,$y1,$scale);

    but nothing changed … so where can I set the final width & height of the thumb?

    THX!
    Forty

  24. On line 44 where it has

    $allowed_image_types = array(‘image/pjpeg’=>”jpg”,’image/jpeg’=>”jpg”,’image/jpg’=>”jpg”,’image/png’=>”png”,’image/x-png’=>”png”,’image/gif’=>”gif”);

    replace it with

    $allowed_image_types = array(‘image/pjpeg’=>”jpg”,’image/jpeg’=>”jpg”,’image/jpg’=>”jpg”,’image/pjpeg’=>”jpeg”,’image/jpeg’=>”jpeg”,’image/jpg’=>”jpeg”,’image/png’=>”png”,’image/x-png’=>”png”,’image/gif’=>”gif”);

    Notice the inclusion of the mime type and the jpeg suffix, This should fix your problem.

  25. This fails in the case of image/jpeg, because $file_ext is then jpeg and $ext is jpg, so an error occurs…

    187 //loop through the specified image types and if they match the extension then break out
    188 //everything is ok so go and check file size
    189 if($file_ext==$ext && $userfile_type==$mime_type){

  26. Hi!nice work!

    i’ve some trouble:the behavior of the script is random, somtimes it works, sometimes it just upload the photo without let me crop it.

    Any guess?

    Thanks

  27. to me the cropping doesnt appear in firefox
    plus if you want to upload a file larger than 500px (even if you modified the size to bigger already), you get a time-out when trying to upload (which is really weird)

  28. I use Firefox and uploaded it to my own site, but I get a time-out when I try to upload the file. The file is also not stored on the server.
    I get this error message in FF: The connection to the server was reset while the page was loading.

  29. @Longboard, you correct in both your comments many thanks for spotting this (OOPS!!), just shows you cannot assume what people would do when using such an application.

    In first case where there is a duplicate file extension, you are absolutely right in checking for file extension first. However, it would probably best to hide the upload form once the user has uploaded an image to ensure this does not happen regardless of the check being there. @Johnny, Longboards suggestion below would do the trick.

    We will be updating this script in the coming month and if there are any other requests please let us know via the comments section on the following page: JQuery / PHP Upload and Crop – Feature Request

  30. Another bug.. there is a devision by zero if no area is selected an you try to upload the thumbnail.

    insert….

    if ($w == 0) {
    $error = “Please select an image area.”;
    }
    else {

    before….

    //Scale the image to the thumb_width set above
    $scale = $thumb_width/$w;

    and after

    //Reload the page again to view the thumbnail
    header(“location:”.$_SERVER[“PHP_SELF”]);
    exit();

    insert….
    }

    So the user gets an error message what to do…

  31. There’s an error in the php part concerning uploads. It is not possible to upload another photo if one was already uploaded in the same session.

    Upload generated a image file with duplicated extensions. e.g. photo.jpg.jpg
    And only the first uploaded images was displayed.

    Try this.. in the .php. Replace:

    $large_image_location = $large_image_location.”.”.$file_ext;
    $thumb_image_location = $thumb_image_location.”.”.$file_ext;

    with

    if ($_SESSION[‘user_file_ext’] == “”) {
    $large_image_location = $large_image_location.”.”.$file_ext;
    $thumb_image_location = $thumb_image_location.”.”.$file_ext;
    }

    Nice script.. thank you….

  32. Can this be modified to allow the user to upload more than one file at a time?

  33. @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.

  34. 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!

  35. lateNIGHT i have the same question, but tomorrow ill try to make it work, JC says that he could so maybe we could too :D

    PD: An example with mysq and PHP ill be very usefull.

  36. 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.

  37. 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

  38. 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.

  39. Script works great, except for in IE (primarily IE8). Has anyone found a fix for IE 8 yet?

  40. 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

  41. 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!!!!

  42. Hello everyone.
    The script is fantastic, but there is a problem.
    By uploading files with jpeg extension crashes.
    Any suggestions?
    Excuse my bad English!

  43. Awesome man!
    Congratulations, good work.

  44. 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?

  45. 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.

  46. I want to be able to have the processed images saved to a different folder. I changes the path here:

    //Image Locations
    $large_image_location = $upload_path.$large_image_name.$_SESSION[‘user_file_ext’];
    $thumb_image_location = $upload_path.$thumb_image_name.$_SESSION[‘user_file_ext’];

    but it doesn’t work. Is there an easy way to save the uploaded file and the cropped file in different places?

    Is there a way to only save the cropped file?

  47. I have the same problem as Dan.
    I can’t upload picture with width bigger then 1000 px. I have blank page then. when I refresh site I see crop area but when I want save the thumb it doesn.t work :(

    Plis help..

  48. ops sorry.

    Even if i add just a BOLD tag inbetween, the preview area dont work.

  49. Hi there… i need some help.
    Everything works perfectly fine but when i i want to start skinning the template by separating the big image and the crop preview by different table cell, the preview area stops working.

    Eg:

    <img src="” style=”float: left; margin-right: 10px;” id=”thumbnail” alt=”Create Thumbnail” />
    XXX
    <div style="float:left; position:relative; overflow:hidden; width:px; height:px;”>
    <img src="” style=”position: relative;” alt=”Thumbnail Preview” />

    If i place a text ( XXX ) inbetween the big image and thumbnail, it work but as long as there html tags in between, error is found.

    Even if i add just a inbetween, the preview area dont work.

    Any idea how i could resolved this?

  50. i have a problem…

    area-select-window is set on load. when i stretch the window, the selected portion is not getting cropped. its saves some other portion of the same image. but it shows correctly in the preview window.

    it also works correctly when i dont stretch the window…

    how to solve this??

  51. First off, must say that I love the script! It works just as expected, but there’s one extra thing that I think would be very helpful.

    Cropping is restricted by the boundary of the picture. If you were trying to focus in on one part of the photo, you can only zoom so far.

    Is it possible to zoom out passed the frame of the image? Maybe a white frame could be added to the resized image, so that the image itself is bigger allowing to zoom in farther???

    Anyone know how I might achieve something like that?

  52. This is a cracking script, however im trying to upload the image path into a Mysql field at the same time, so the database can call the image using the path.

    Is this possible?

    I basically have a profile script and the photo is stored with the records name, email, number. I have made the fields in the table but cant figure out how to insert an image path to call up, its driving me crazy!

    Ive searched google and still looking for an answer, if I find out how to insert the image path into a table ill let you guys know, any help would be much appriecated!

  53. Great tool…thanks..my images are not caching now :-)

  54. I said to myself I wasn’t going to write a comment because I hate writing comments asking for help, but I tried everything I thought of apart from… restart the browser! Obviously all the session variables etc. were still set to the old ways, so it was getting very confused. Seems to be sorted now.

    What a great tool, keep up the good work.

  55. Really don’t expect anybody to know this, but whatever – I got it working, just about, had a problem with directories (I changed them), and it was working. Change too many file directories, stopped working at all. Buggered up so downloaded it again and now the fresh version, without any of my modifications, doesn’t work.

    Files upload, and I can see them in upload_pics, but the form doesn’t bring them back to crop them.

    Any ideas?

  56. Hi,

    I am trying to implement your code , I have a list of profiles for which i need to upload images. I have successfully implemented the upload feature and thumbnail generation. Now the problem is when i delete the image for one profile and then come back and add an image for the same profile, it always displays the previous image (cache). This works fine in FF ,but IE is loading images from cache…any idea how to solve this. I have added no cache header to the page but still it is cachin the image..

    Thanks
    Pradish

  57. Hello everyone,

    Thank you for promoting this script, I really like… But I have one big issue, which I’m not able to figure it out, maybe someone of you guys can help me out.

    In the first step of the script I’m trying to implement a “uploadbar” which shows the process of uploading the “big”-first image… Maybe someone can share an example with me or help me with some tips?

    Thanks for that!
    Rolf

  58. Figured it out – it was obviously my mistake..
    Thanks again for the great piece of code.
    Peter

  59. Hi,

    Great script, thank you very much – actually it’s one of the best image upload scripts I’ve seen. However, I’m having little compatibility issues on IE8 and FF3.5.

    on IE8 – works only in compatibility mode.
    on FF3.5 – doesn’t get to the crop part at all.

    I was wondering if anyone else is having similar issues?

    Peter

  60. Hi,

    I think this is a very cool application but would like to tweak it a little bit. I would like not to have to upload the image before making the crop selection. I can get the image in the cropping area fine and the selection works perfectly but here’s the question:

    How wolud I go about changing the php-script so that it uploads a file I specified in the form posted (not in a file-type input field but a hidden one)? And then does the same cropping as the original script, of course.

    Thanks in advance!

    Fredrik

  61. I believe I may have found a bug.

    I set max_file to “5” and max_width to “640”

    I then tried to upload a 4.5 MB JPG which then returns a blank page without the crop features. I hit the back button which then reveal the original image of 2304×3072 with the crop features but these don’t work.

    I was just testing how a user might realistically upload a photo after directly docking their camera. I advise that you use this same test scenario to counter the bug.

  62. WOW!!!!!!!!!!!!!!
    The best upload script ever, 100% customizable.
    Here’s one contribution:
    At the line where is the Image to Crop add “cursor:crosshair” at the style.
    The changed version is:
    <img src=”” style=”float: left; margin-right: 10px;cursor:crosshair” id=”thumbnail” alt=”Create Thumbnail” />

    And it will show a cross when mouse is hover.

    Thanks a lot
    Higor
    higorvaz@gmail.com

  63. @shin, you can crop at different sizes, however it will require you to edit the script to remove the elements that define the thumbnail size and replace it with your own. Also a preview may not be possible for images that do not have a fixed thumbnail height and width.

  64. Thanks.

    I wonder how I can crop image with different sizes.

    Can anyone enlighten me how to do it?

  65. Do you know of a method to add text to uploaded images?

  66. Hi webmotionuk,

    I have an issue with IE 6, when i upload an image for the first time, the cropping tool isn’t visible. After i close the window with your script and reopen >> reupload >> i can see the cropping tool.

    This only appears in IE6 at the moment

    Any advice??

  67. @dydream, safe_mode must be off for this script to work.

  68. webmotionuk,

    Does this PHP script work in safe_mode = ON?

  69. Thank you very much, it’s working perfectly on both IE & FF now!

  70. @Kyaan, your css command for jquery is incorrect, please see the jquery documentation on applying css to elements,

    $(“.my_element”).css(“color”,”#ffffff”)
    Try
    $(“.my_element”).css(“z-index”,”200″)

  71. Hi, I am trying to use this great plugin in a JQuery Dialog but I’m having issues with z-index of the selection div,

    I tried (with no result):
    $(‘.imgareaselect-outer’).css(z-index:2000 !important;);
    $(‘.imgareaselect-selection’).css(z-index:2000 !important;);

    Do you know a way to fix this please?

  72. Thanks for the script … very useful!

    I’m having an issue with the selection tool in IE7. I’m working off of your upload_crop_v1.2.php file “as is”. I was able to upload a photo, but when I go to make the selection, I get an error:

    Line: 13
    Char: 12949
    Error: Invalid argument
    Code: 0
    URL: …/upload_crop_v1.2.php

    Things are working fine in Firefox though. I also looked at your demo in IE7 and it works fine. Any ideas?? I could be overlooking something simple.

    I’m using jquery-1.3.2.min.js and jquery.imgareaselect-0.8.js.

  73. Very nice script…

    I’m trying to do the same thing as huzzi – got the thumbnail overview loading up perfectly on load, but is there a way to ensure the thumbnail matches this on load (as opposed to on mouse interaction)?

    Thanks,
    Adrian

  74. Nice script…

    Can someone crop an image that is larger than the screen size?

    Is it possible for someone to download what they just cropped?

    Thanks,,,

    AG

  75. Brilliant, thanks so much.

  76. @huzzi,

    Find and change the following line
    $(‘#thumbnail’).imgAreaSelect({ aspectRatio: ‘1:1′, onSelectChange: preview });
    to
    $(‘#thumbnail’).imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210, aspectRatio: ‘1:1′, onSelectChange: preview });

    Obvioulsy the x1,y1,x2,y2 values above are just an example and may not work on your image. Adjust as necessary.

  77. Is it possible to make the thumbnail overlay visible on load?

    thanks

  78. it’s a mistake from me,sorry.
    thank you for your fast reply

  79. @nicos, could you please specify again what it is you need, your comment doesn’t really make sense. in both scripts you are able to re-upload a new image once a crop has been made.

  80. In script 1.0, it was possible to re-upload a file if the uploaded picture didn’t (on the screen you resize the pic.)

    In 1.2 version, it seems this feature isn’t avaible anymore. How can i solve this problem? Thanks

  81. It is wonderful. But we have one issue in IE 7. If we left double click on image instead of cropping area select then getting a JavaScript error “Invalid arguments”. But working fine with Firefox. Any idea to fix this issue.

    Thanks in advance
    Honish

  82. @munky, the image_type_to_mime_type() function is a built in PHP function more details can be found here http://uk2.php.net/image_type_to_mime_type, this function has been found to create problems in PHP versions older than 4.3.

    in our code, just above the image_type_to_mime_type function there is the following:

    list($imagewidth, $imageheight, $imageType) = getimagesize($image);
    $imageType = image_type_to_mime_type($imageType);

    change it to

    list($imagewidth, $imageheight, $imageType, $bits, $channels, $mime) = getimagesize($image);
    $imageType = $mime;

    You will need to change it in both the image resize functions
    starting line: 56 – resizeImage() function and
    starting line: 97 – resizeThumbnailImage() function

    Hopefully that should do the trick.

  83. hi, i tried to use it but after i load the image this is what i get “Fatal error: Call to undefined function: image_type_to_mime_type() in c:\apache\htdocs\upload_crop_v1.2.php on line 5″

    what am i doing wrong?

  84. Unfortunately it does not work all that well on google chrome, it uploads the image but does not go tot the crop image part.

  85. @daemon & @nickstaw, thanks for the comments.
    @nickstaw, you basically have to use the $large_image_location and set that to the original file name, however, you will need to pass this name throughout the script therefore saving the name of the original file in a session will do the trick.

  86. Great work all round chaps. Looks like it will be extremely useful.

    Just one thing that I ask in ignorance. I am trying to get the name of the file to be the same as the original filename. I have located the variable ($userfile_name = $_FILES[‘image’][‘name’];) but I can’t for the life of me work out where I need to insert it to make it work. Please could someone help out as I’m tearing out what little of my hair I have left!!

    Many thanks in advance

  87. this is perfekt work..!!!

  88. @Michal we will include your updated version in the download

  89. @Dydream:
    Please try the latest version (0.5.1), it should fix the problem.

  90. Has anyone used this script in Konqueror (under Linux) ?

    Michal’s Image Area Select plugin turns the large image black, and the crop are white during cropping.

  91. never mind, I got it. it was working but my png file was not saved in ‘indexed’ so it wasn’t working before.

  92. your script is so close to perfect for me. Can you help me take it one step further? Once the pic is uploaded and the user has selected the area they want to thumbnail, can you help me insert the ability to watermark it? (watermark will stay at 100 by 100 dimensions) Also, could I send the new filename into a mysql database? Please let me know how I can insert this into the script. Thanks

  93. Just wanna let you know that I’ve been working on a WordPress function and your previous script was a BIG help for me. I’ll be checking out this new one and see what I can improve on.

    I thank you very much!

Leave a Reply