Crop & Resize with JavaScript, PHP, and ImageMagick

 Comments

104 Comments

1. Sam January 22nd, 2007

   

   This is really great Jon! I can definitey see it being used within a CMS. Are there any plans for a WordPress plugin version, perhaps as an editing stage when uploading an image? I’m sure it would be very well received.

2. Mike Papageorge January 22nd, 2007

   

   Nice work!! I’d wanted something like this for a while now for our CMS…

3. Jon January 22nd, 2007

   
   Author

   @Sam: Thanks a lot! It was a fun demo to put together and I hope it proves to be useful not only for myself but for others as well.

   The idea of integrating it as a WordPress plugin somehow is tempting, perhaps sometime down the road, sure!

   @Mike Papageorge: Thanks a lot for taking the time to stop by and post, and thanks for the compliment. I’m really glad this seems to be something you were keeping an eye out for, perhaps you can return with any reactions as far as actual implementation is concerned.

4. P.J. Onori January 22nd, 2007

   

   Oh man, that is slick indeed. The tool is ridiculously easy to use and quite powerful to boot. Great work man - awesome stuff.

5. Chris Robinson January 22nd, 2007

   

   Great work! I to think this would be a great Wordpress plugin, I’ve actually been looking for one that accomplishes just this.

6. Jon January 23rd, 2007

   
   Author

   @P.J. Onori: Thanks a lot, much appreciated.

   @Chris Robinson: Yes, I agree. While I’ve never written a WordPress plugin for public release, I will start looking into it and perhaps at some point down the line it will be ready for public release.

7. Milan January 27th, 2007

   

   This looks promising, keep up the good work! Some things to consider when making a wordpress plugin out of it:

   - Why rely on ImageMagick? I know it’s powerful, but it’s not as common as GDlib. This might prevent people from using it. Or am I mussing a point?

   - Features for maximum width/height, aspect ratios, default cropping sizes would be good for preventing editors from screwing up image work.

   Thumbs up!

8. Jon January 27th, 2007

   
   Author

   @Milan: Absolutely, if I were to write a WordPress plugin for it, I would definitely go with GD over ImageMagick. The reason the example uses ImageMagick is because it was written as a proof of concept for a new feature for a custom CMS used (and written) by the company I work for. Eventually it will be elaborately expanded on, taking advantage of how robust ImageMagick is.

   Adding more options such as aspect ratio and maximum width/height can actually be implemented in the JavaScript UI portion. You can read more about it in the documentation.

   Thanks for posting your thoughts and ideas!

9. All in a days work… January 28th, 2007

   

   [...] Crop & Resize with JavaScript, PHP, and ImageMagick a demo which gives the end user the ability to upload, crop, and resize their image from within their Web browser, uses ImageMagick, Prototype, scriptaculous, and PHP (tags: Image_Editors) [...]

10. parth January 30th, 2007

    

    hi,
    i really liked this thing…
    its fast and look & feel is also good..

    regards,
    Paarth.

11. kyle January 30th, 2007

    

    Another thing that would be nice to see is the height and width of the resized images while resizing. Ideally, you’d have two text input boxes with the values - so if I wanted to have it be 400px wide I could just enter that in the text box. A constrain proportions checkbox would be handy as well - since I might want something to be 300×200 pixels, even if those aren’t the current dimensions.

    Which leads to wishlist item #2 - a ratio option for cropping.

12. richard rubbra February 2nd, 2007

    

    Hi, I have been looking for a tool like this. I need just the ability for the client to select a portion of a very wide image, save it and have it sent back to me. I run on a windows server, You state that it is simple to adjust this php to run. I know nothing about this area. Is it really that easy? And any idea exactly what one adjusts?
    Thanks
    Richard

13. Jon February 2nd, 2007

    
    Author

    @parth: Thanks a lot! I’m glad you enjoyed it!

    @kyle: The author of the Cropper UI actually already has implemented ratio restrictions among other options you can use. Perhaps I can put together a more comprehensive set of examples combining a few of the extras in the near future. For now you can check out the official site of the Cropper UI and see more in action if you’d like.

    @richard rubbra: Yes it should be easy to adjust for a Windows based server if you have PHP and ImageMagick running on the webserver. The adjustments you’ll need to make are in the lines of PHP that actually generate the ImageMagick commands — you’ll need to prepend them with the path to the ImageMagick executables. Other than that everything should go as expected.

14. Crop & Resize with JavaScript, PHP and ImageMagick | Avinash - An IT Blog February 7th, 2007

    

    [...] Site: Monday By Noon [...]

15. wozzzza February 23rd, 2007

    

    brilliant script, just brilliant. apart from one factor, this script could be very very popular, more popular than it is now. the simple fact that imagemagic is not on every server and lots of servers have exec() disabled for security reasons. i was desperate for a script like this, i put this in my too hard basket and kept looking for another one to do what i wanted because of this image magic problem. then i thought, stuff it, i will try and change it over to use gd library. so i did it, took me a couple hours and was quite easy to change to use gd library, i dont know why the author doesnt do it, was very easy to do then more people would want this script.

16. Jon February 23rd, 2007

    
    Author

    @wozzzza: The reason the example uses ImageMagick is solely because it was written as a proof of concept for a CMS ‘widget’. It’s awesome that you took the time to port the image processing to gd — something I plan on doing in the near future and updating the example. Good work!

17. wozzzza February 24th, 2007

    

    got a problem now, in IE6 when i use this script in a layer created with Advanced Layer Popup http://www.dmxzone.com/ShowDetail.asp?NewsId=12769 the crop area creates a hole through to the website in the browser underneath and you cant see what ya cropping, any ideas on how to fix this?? works fine in firefox.

18. scriptvote » Blog Archive : Crop & Resize with JavaScript, PHP, and ImageMagick » Crop & Resize with JavaScript, PHP, and ImageMagick February 25th, 2007

    

    [...] http://mondaybynoon.com/2007/0.....magemagick This entry was posted on Sunday, February 25th, 2007 at 8:00 pm and is filed under Webmaster, [...]

19. Julian Schrader April 2nd, 2007

    

    > - Features for maximum width/height, aspect ratios, default cropping sizes would be good for preventing editors from screwing up image work.

    Ditto.

    Great work though!

20. Marcus April 5th, 2007

    

    Hey Jon,
    This is pretty impressive stuff. I really want something like this for my website running on W2k3. I think I will download it and see if I can get it running on W2K3. Very good demo….
    Marcus

21. Robert A. April 5th, 2007

    

    I tried the demo and it’s awesome! I just got imagemaick installed and uploaded all the files. set the permission. having a problem though. when it goes to image_resize.php, i get this error.

    Warning: chmod() [function.chmod]: No such file or directory in /home/www/****/resizer/resize_image.php on line 34

    When I dont crop or resize, the error doesn’t happen and i’m able to finish the process but without any editing. Any ideas what the problem may be. I did /usr/local/bin/convert logo: logo.gif to check if imagemagick was working and i didn’t get any errors.

22. Il meglio della settimana - 27 | Napolux.com May 13th, 2007

    

    [...] steps to become a better blogger H3rald.com Getting started with PEAR Best PHP tools of the month Crop & resize with JavaScript & PHP barcamp matera, blog, H3rald, Il meglio della settimana, javascript, pear, [...]

23. jigga May 14th, 2007

    

    This is exactly what I have been looking for. BUT I get the same error Warning: chmod() [function.chmod]: No such file or directory in ****/resize_image.php on line 34.

    It seems that the

    exec($convertString);

    fails. This will resize the image and move it to right folder but it does not do it. I tried in ie6, ie7 and ff2.1 but no luck.

    $convertString is “convert working/uploads/logo.jpg -crop 483×219+411+229 working/cropped/logo.jpg”

    I would appreciate an answer soo much couse this is exaclty what I have been dreaming of..

24. Jon May 14th, 2007

    
    Author

    @jigga: I’m sorry the script isn’t working as it should. Unfortunately I’m a bit strapped for time today, but hopefully I can check into things in more detail over the next couple of days.

25. Jorge Salvador Caffarena May 15th, 2007

    

    Nice script!

    I tried setting custom crop and ratio settings as told in the Javascript Image Crop script docs, but it doesn’t work with your script Jon, seems to ignore what I put in init_cropper.js. Maybe that’s why you get so many request for it Jon, seems to not be working properly.

    Anyway, will be watching in case of a fix, as this is nice work indeed.

26. Jon May 15th, 2007

    
    Author

    @Jorge Salvador Caffarena: It’s disappointing that you’ve found it difficult to add such a feature to the script. I plan on revising the example, and offering exactly what it is you’re trying to accomplish in the coming weeks if you’d like to stay tuned.

27. Brandon June 1st, 2007

    

    Any updates on whats breaking the script? Awesome script man! Very nice.

28. nicky June 1st, 2007

    

    Great and easy to use! Although I don’t have access to ImageMagick so I need this with GD-support. Have anyone made it or do I have to make it myself?

    I’d also like to lock the ratio, but I haven’t tried it yet.

    Thanks for a cool script!

29. Jon June 4th, 2007

    
    Author

    @Brandon & @nicky: I’m planning on releasing a revised version of the example in the coming weeks. I don’t have a definite date as I’d like to take more time to test this version. I’d like to also add more features such as ratio restriction, as well as a separate version using gd. I apologize for not having an absolute date, but please stay tuned!

30. patrick June 7th, 2007

    

    can you also add a rotate option, imagemagick has a rotate command. also say i wanted to keep the ratio… ex. image is 400×400 and i want the image cropping to always be within the ratio down to 50×50 how would i do that? the user shouldn’t be able to size the image to 100×50

31.   links for 2007-06-12 by SridhaReena June 12th, 2007

    

    [...] Crop & Resize with JavaScript, PHP, and ImageMagick - Monday By Noon (tags: javascript crop resize image) [...]

32. ste June 28th, 2007

    

    oooooo a GD version… sounds good…. I’m just in the middle of chrooting imagemagick so a straight GD version would certianly be easier to setup

    Good luck with the development

33. Andy July 26th, 2007

    

    I’ve adapted this to integrate back office/shopping cart to allow the admins to crop a picture then it provides a thumbnail and a standard size picture.
    Good Work !!!

34. will August 20th, 2007

    

    i really like this script… it would in theory solve a couple of issues i encounter with a project i’m working on. kudos… i’m curious… is it possible to set relative x y say % instead of pixel size attributes to the crop tool?

35. Jon August 23rd, 2007

    
    Author

    @will: There are many iterations of the cropper provided on the developer’s site — but really the options are limitless if you’re willing to add to the JavaScript yourself.

36. John Clark August 28th, 2007

    

    Hey Jon, Great script! I was just wondering how close you are not to releasing the new version? If you need a tester, please let me know. Thanks!

37. Stefan September 4th, 2007

    

    Currently I have managed to create a GDLib version of this script myself as well.

    I’m currently shaping it a bit to the needs I have to have for a website i’m creating (Jonathan, your name and this site are of course noted underneath your script!).

    But the GDLib implementation is fairly easy although you have to play with vars a bit.

    I have managed to use the same values Jonathan posts when you’ve selected the fragment of the image. After that I just used the Imagecopyresampled function like this:

    (file: resize_image.php the code is between line 33 (if-statement) and the else.
    code:
    $dest = imagecreatetruecolor($cropWidth, $cropHeight);
    $source = imagecreatefromjpeg($sourceFile);
    // Resize
    $crop_dest_X = $cropX - $cropWidth;
    $crop_dest_Y = $cropY - $cropHeight;
    imagecopyresampled($dest, $source, 0, 0, $cropX, $cropY, $cropWidth, $cropHeight, $cropWidth, $cropHeight);
    // Output
    imagejpeg($dest, $destinationFile);
    //—

    I have used a destination file as the usual iMagick script does as well… after a bit of throwing with numbers I discovered that setting the original size to the size the user has selected it works fine and fetches the fragment on the pixel!

    Good luck with it yourself!

    Stefan Leever

38. Jonathan Christopher September 4th, 2007

    
    Author

    @John Clark: With Stefan’s work I should hopefully release a GDLib version soon, and I plan on revisiting the cropper UI as well to include some more features. Unfortunately time has been at a premium lately, but I assure you it’s in the plans.

    @Stefan: That’s fantastic! Thanks so much for posting your findings. If you don’t mind I’d like to bundle the changes you’ve made (with due credit) and provide it as an alternative download — would that be alright?

39. Stefan Leever September 4th, 2007

    

    @Jonathan Christopher: sure you could use it in a GDLib alternative download with the due credit hehe, I have to note a minor change of some unused variables in the code above.

    This would be the final code:

    $dest = imagecreatetruecolor($cropWidth, $cropHeight);
    $source = imagecreatefromjpeg($sourceFile);
    // Resize (using the selected size the user has selected to crop (last 2 vars)).
    imagecopyresampled($dest, $source, 0, 0, $cropX, $cropY, $cropWidth, $cropHeight, $cropWidth, $cropHeight);
    // Output the resampled image to a file:
    imagejpeg($dest, $destinationFile);

    Good luck! And I will probably see the new update soon!

    Stefan Leever

40. Rob Nugen September 8th, 2007

    

    Fantastic script!!

    I made a bit of a code change that I’m sure you’ve already made as well, but I just want to include it so you can change the current downloadable version (which I just downloaded)

    Under the line // RESIZE IF UPLOAD IS TOO BIG

    you check the width twice.

    if(($dimensions['width']>$maxWidth) || ($dimensions['width']>$maxWidth)){

    I changed it to width and height

    if(($dimensions['width']>$maxWidth) || ($dimensions['height']>$maxHeight)){

    And then changed to use the variables instead of the hardcoded 640×480 which had been there.

    $cmd = “convert ” . $imageLocation . ” -resize ” . $maxWidth . “x” . $maxHeight . ” ” . $imageLocation;

    ——

    I’m interested in tweaking it so that I don’t have to upload pics, but can just point to pics that already exist on my server. I have thousands, and all the thumbnails were created by just shrinking. I want to recreate them with yer beautiful code.

    If I get it working, I’ll definitely send copies.

41. Serdar October 10th, 2007

    

    thanks for this great job! but I’d like to ask something. I am doing a new web site and I want to use this picture thing. But some of my friends say that no hosting company let you use this scripts because of some root priviliges. Can you inform me about that? Thanks in advance

42. speedstar October 10th, 2007

    

    Hello
    first of all thanks.. My question is similar to Serdar’s. In your php document, there are exec() commands and most of host company do not let you use them. What can I do? Do I have to change them or have to use an interface like IMagick?
    Thanks

43. Sussie October 11th, 2007

    

    Hey.
    I love this. but…
    Could someone help me with this? I don’t want to use this script for uploading, as I already uploaded the files I would want to crop and resize.
    Do you guys have an idea how to get crop_image.php, resize_image.php and last_step.php to use a $_get variable??????
    I’m not an advanced programmer.
    Thanks.

44. Henryk October 12th, 2007

    

    hi,
    can I use this demo zip on my website and why the images are beeing deleted after 5 minutes?

45. Henryk October 12th, 2007

    

    How can I change the picture upload size from 50k to more? please help

46. Henryk October 12th, 2007

    

    Any idea why am I getting this error after image uploaded?

    Warning: exec() [function.exec]: Unable to fork [identify 'working/uploads/Water lilies.jpg' 2>/dev/null] in D:\Domains\domain.com\wwwroot\crop_image.php on line 43

47. seb October 18th, 2007

    

    I need this to work on my Joomla website…

    I tried to use the code but the image that get displayed is a regular one… (i.e. there are no cropping functionality.)

    This may be a path related issue. As joomla doesn’t allow relative path. (i.e. In the php files, we must insert the directory into which the code is placed.)

    Thanks for any help !

    P.S. My goal was to make it work with GD2.

48. Rob Nugen October 19th, 2007

    

    @Sussie, cc@Jonathan:

    I modified the code to not require (not even allow) uploads. I have thousands of pictures on my site already. I just want to crop and thumbnail them.

    The code I wrote is tweaked for my website, but should be pretty easy to make work for others.

    The source for what I wrote is on my site here:
    http://robnugen.com/downloads/.....ler_v1.1r/

49. Rob Nugen October 19th, 2007

    

    @Serdar, @speedstar

    I am using the code no problems on my site, which hosted by http://www.dreamhost.com/r.cgi?204388

50. Cassius October 25th, 2007

    

    “How can I change the picture upload size from 50k to more? please help”

    In the file named index.php, where it says:
    input type=”hidden” class=”hidden” name=”max_file_size” value=”50000″

    Change th 50000 to whatever you need.

51. Jonathan Christopher October 26th, 2007

    
    Author

    Thanks to everyone who is helping one another with the various issues cropping up. I have been making improvements to the example over the past few weeks, but it’s not ready for display quite yet.

    Regarding exec() commands — they will definitely be an issue with certain shared hosting accounts, I will work on making the next version as friendly as possible.

52. Shalimar October 28th, 2007

    

    Hi, I saw some posts about various warnings with function.chmod and that is my problem too. However, I have 10 warnings 4 chmod ones, 4 mkdir errors, and 2 move_uploaded_file errors. I have everything set to 777. What could be the problem?

    Warning: mkdir(working) [function.mkdir]: Permission denied in /home/aspensan/diamondloungegirls/demo/crop_image.php on line 21

    Warning: chmod() [function.chmod]: No such file or directory in /home/aspensan/diamondloungegirls/demo/crop_image.php on line 21

    Warning: mkdir(working/uploads) [function.mkdir]: No such file or directory in /home/aspensan/diamondloungegirls/demo/crop_image.php on line 22

    Warning: chmod() [function.chmod]: No such file or directory in /home/aspensan/diamondloungegirls/demo/crop_image.php on line 22

    Warning: mkdir(working/cropped) [function.mkdir]: No such file or directory in /home/aspensan/diamondloungegirls/demo/crop_image.php on line 23

    Warning: chmod() [function.chmod]: No such file or directory in /home/aspensan/diamondloungegirls/demo/crop_image.php on line 23

    Warning: mkdir(working/finished) [function.mkdir]: No such file or directory in /home/aspensan/diamondloungegirls/demo/crop_image.php on line 24

    Warning: chmod() [function.chmod]: No such file or directory in /home/aspensan/diamondloungegirls/demo/crop_image.php on line 24

    Warning: move_uploaded_file(working/uploads/IMG_0002.JPG) [function.move-uploaded-file]: failed to open stream: No such file or directory in /home/aspensan/diamondloungegirls/demo/crop_image.php on line 38

    Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move ‘/var/tmp/phpsCOi0x’ to ‘working/uploads/IMG_0002.JPG’ in /home/aspensan/diamondloungegirls/demo/crop_image.php on line 38

53. Shalimar October 28th, 2007

    

    Nevermind my last post, it was a bit premature. Everything is working fine now. Awesome program!

54. shalimar October 28th, 2007

    

    just wondering what file/function i’d edit so that the box isn’t drawn to user specification but to my own (300px by 300px) when cropping. In short i want the cropping tool to be 300 by 300 as the default

55. nitin sharma October 29th, 2007

    

    hi this script grb but facing the problem on the resize_image page
    Warning: chmod() [function.chmod]: No such file or directory in C:\wamp\www\crop3_best\resize_image.php on line 34

    how ot solve that problem
    Thanks

56. Magnus Ingi November 5th, 2007

    

    @ shalimar

    Just edit the init_cropper.js file and use the “ratioDim” and “displayOnInit” to make it work like you want to.

    An example:

    Event.observe(window, ‘load’, function() { new Cropper.Img(’cropImage’,{onEndCrop:onEndCrop,minWidth: 300,minHeight: 300,ratioDim: {x: 300, y: 300}, displayOnInit: true}) });

    This will give you a 300 by 300 crop on page load and it will not allow the user to shrink the crop to less then 300×300 :)

57. Magnus Ingi November 5th, 2007

    

    Hey Jonathan,

    I’ve been testing your script a little and I’ve gotten into a bit of a problem regarding IE7 (and maybe IE6, haven’t tested it yet).

    The problem is that when I use the Crop UI inside and iFrame it doesn’t display correctly in IE. It only displays the “crop box” and a dark background but not the image it self. It works great in Firefox but not in IE. When I crop the image and submit it everything is submitted OK, both in IE and FF, but the Crop UI doesn’t seem to want to display the image in IE.

    Do you know why this is? Do you have a solution for me? :)

    Sincerely,
    Magnus

    PS. Nice script!

58. Jonathan Christopher November 5th, 2007

    
    Author

    @shalimar: Please see Magnus Ingi’s comment for a great tip!

    @nitin sharma: That error seems to indicate that one of the directories used to store images was not created. Do you have proper permissions to run the script on your server?

    @Magnus Ingi: Firstly, thank you for helping shalimar with your quick tip! I’ve been away the past few days so I wasn’t able to respond. Secondly, I’m not sure about the quirk you’ve found with Internet Explorer. I’ve never tried including the script in an iframe. Have you included it in an iframe in an effort to escape the page refreshes?

59. Magnus Ingi November 5th, 2007

    

    @ Jonathan Christopher: No, I’m not trying to use an iframe to escape the page refreshes. I’m using an iFrame because I’m displaying the crop interface within a “Thickbox” (http://jquery.com/demo/thickbox/).

    I tested the page out with out using the iFrame (with the same CSS and same Javascript) and it works fine when not inside the iFrame. But when I try displaying in in the Thickbox, it doesn’t work in IE. I’m going to see if it works in Safari and Opera, if so, IE sucks ;-)

    If you have any ideas, please let me know!

    Sincerely,
    Magnus

60. Thue Andersen November 20th, 2007

    

    There is a bug in the JavaScript selection tool.

    If you … how can i explain this. I’m Danish. I will try my best.
    If you select a wide area that goes all the way from the left to the right, but keeping a selection with only a small height, then somehow the entire picture is selected.

61. <blog> interfce.com </blog> » Blog Archive » bookmark dump November 20th, 2007

    

    [...] Crop & Resize with JavaScript, PHP, and ImageMagick - Monday By Noon [...]

62. fish November 25th, 2007

    

    I am trying to figure out where to config my path to imagemagick. I have everything installed and the path added for my user id on the server, but I am not sure where in the PHP files to prepend my path.

    Thanks in advance and thanks for this awesome script!

63. Paul November 29th, 2007

    

    I’ve only just come across this srcipt today and I really like it think it could come in very handy if only I could get it to work. I noticed its been some time since the mention of a GDLib version was last mentioned, is this on stop now or is it still in the process of being coded?

    I thought its well worth asking as I’ve spent a few hours this evening following Stefan Leever’s posts above in attempt to sort a working GDLib version for myself but am not really any closer after 4 hours than I was after five mins lol, as you’ve probably guessed by that, I’m a real beginner (at best) when it comes to php.

    Despite getting the cropping part to work well, I can’t for the life of me get the re-sizing part within last_step.php working properly. At best I could achieve a resize in the width but not the height (and only then if a crop had been performed previously, if the image was passed onto last_step.php uncropped the re-sizing step either resulted in php erorrs or a very strange final image which barely resembles the original image or both at the same time).

    I managed to fix one or two smaller problems I had with getting the script to work (all be it without the re-size part) on a Windows server by:

    replacing lines 40 and 41 in resize_image.php with… rename(”$sourceFile”, “$destinationFile”);

    and replacing lines 27 and 28 in final_step.php with ….
    rename(”$sourceFile”, “$destinationFile”);

    While looking for them lines I noticed a few more instances of $cmd in the files that may not work properly on a windows server properly so in the absence of any better ideas I’ll go back and take a look at them.

    Hope a release of proper GDLib version is still on the cards…..
    Paul.

64. Jonathan Christopher November 30th, 2007

    
    Author

    @fish: Are you currently trying to get the script running on a Windows server?

    @Paul: First, I’m terribly sorry you’ve invested so much time with no resolve. I am indeed working on a GDLib version of the script, but I’m afraid my time has been quite limited as of late. I’ve noted your email address (as well as everyone else who has expressed interest) and I’m really going to try and schedule some time to revisit the GDLib version as soon as possible. It appears I’ve got to take a look at things to make sure they’ll work in a Windows environment as well.

65. Paul November 30th, 2007

    

    Hi Jonathon,
    Thankyou for the reply, good to hear that a GDLib version hasn’t been forgotten about :-)

    I like playing around with scripts and although my lack of experience with PHP or any script for that matter slows me down I am definately learning a fair bit about PHP through Trial and Error so I’m not worried about spending a bit of time playing around.

    That said I’ve spent a few more hours playing around with this again tonight and I’m very close to getting a fully working GDLib version working on a Windows server, Infact I only really have the initial resize pic to $maxWidth and $maxHeight to sort now (it works for landscape pics but need to think of a way recoginse portrait images and deal with them properly), the rest seems to work fine though :-) .

    I’d be more than willing to pass on the files I’ve ended up with / got so far - if they would be any help to you Jonathon? although the bits I’ve changed probably look a bit crude and poorly written to someone who knows what they are doing, it seems that they are at least functional. Just send me an email if you think they would be of any use to you.

    I did think about listing all the changes I made in here so others could build off it but I changed so much in the end that it would take me all night to type it all up, thats if I could rememeber / recognise all the bits I did alter :-s LOL, besides it would be a far better idea for people to wait for the proper GDLib version to be released as its bound to be better than what I came up with.

    Paul.

66. Crop & Resize with JavaScript, PHP, and ImageMagick - Monday By Noon | David Bisset: Web Designer, Coder, Wordpress Guru December 4th, 2007

    

    [...] This gives the end user the ability to upload, crop, and resize their image from within their Web br… Tags: ImageMagick, Javascript, PHP [...]

67. fish December 4th, 2007

    

    I am trying to get it working on a BSD system. It is a shared hosting platform. I know for sure they dont have IM installed by default…. thanks for your reply!

    -fish

68. acctman December 5th, 2007

    

    do you have any code to rotate the image 90, 180 and 360 from left to right?

69. acctman December 7th, 2007

    

    ok i changed the Resize image to check just the width and also check to see if the image is too small. If, image is less that 320 in width increase…

    $maxWidth = 640;
    $maxHeight = 480;
    $maxWidth2 = 320;
    $maxHeight2 = 240;

    // RESIZE IF UPLOAD IS TOO BIG
    if(($dimensions['width']>$maxWidth) || ($dimensions['height']>$maxHeight)){
    $cmd = “convert ” . $imageLocation . ” -resize 640 ” . $imageLocation;
    $results = exec($cmd);

    // RESIZE IF UPLOAD IS TOO SMALL
    } elseif(($dimensions['width']<$maxWidth2) || ($dimensions['height']<$maxHeight2)){
    $cmd = “convert ” . $imageLocation . ” -resize 320 ” . $imageLocation;
    $results = exec($cmd);

70. acctman December 7th, 2007

    

    ok, i changed the init_resize.js so the user can not resize an image to small…
    old : range:$R(20,200),
    new: range:$R(100,200),

71. acctman December 7th, 2007

    

    can someone assist me with using the “convert -rotate 90″ command. I want the user to be able to rotate there image 90, 180 from left to right

72. Paul December 7th, 2007

    

    I looked quickly into acheiving the same thing as you acctman but unless I have got the wrong end of the stick you need to use php (or another server side script) to rotate the image as javascript, being a client side script can’t do it. Of course if you are using ImageMagick then it may be easier than figure out your own custom php to do the job, but I have no idea how image magick works.

    Even using Image Magick you could still use php to do the same thing (by appling the rotate to the finished image)
    The way I thought about doing it was to add extra form fields in resize_image_php - add a few radio buttons which correspond to a set rotation angle which when selected submit a value to last_step.php then in last_step.php you’d need to use an IF statement to check if the rotate buttons are selected and if they are then perform the corresponding rotate on the final image using php image rotate - http://uk.php.net/imagerotate

    Obviously this way of doing it means that you have no preview of what the image would look like rotated, and I’m no where near clever enough to figure out a way to do that :-S. Ideally you could do with being able to rotate the cropper / image in the beginning but I suspect the amount of extra javascript needed to do that would be huge.

    Maybe some smarter people will have a better way to do it?

73. acctman December 7th, 2007

    

    anyone have a code to convert the image format to .jpg after upload or upon saving?

74. Mehul B Dobariya December 9th, 2007

    

    I am getting errors:
    Notice: Undefined offset: 1 in C:\Program Files\EasyPHP 2.0b1\www\crop\crop_image.php on line 52

    any idea?

75. Mehul B Dobariya December 9th, 2007

    

    And what if i want to uplaod file bigger then 50K

76. Mehul B Dobariya December 9th, 2007

    

    Ohhh i got everything….

    Cool script…

    good effort..

    Thanks..

77. Jonathan Christopher December 10th, 2007

    
    Author

    @acctman: I will work on incorporating image rotation as well as image format conversion for the next revision.

    @Paul: Thanks very much for your continued research and information!

    @Mehul B Dobariya: I’m thrilled you were able to find solutions. I’m going to include more robust documentation in the future.

    To make my plans for the next version as clear as possible; I’d like to prioritize getting a working GDlib version up and running. From there, I’d like to include at least a few varying implementations of the cropper itself, including ratio and pixel defined restrictions in place. From there I’d like to add image format conversion examples as well as image rotation, but I’m going to make sure both the ImageMagick and GDlib versions are equal in functionality. I’m really planning on releasing a new version within a couple weeks, so please stay tuned.

78. Mehul December 10th, 2007

    

    Hay,
    Can you help how I can make crop area fixed? I mean when I upload image and suppose image size is whatever like (1000 X 800, 2000 x 1200 etc) but after uploading I want to set crop area only 800 X 600. I don’t want to allow user to change it. And is it possible to make crop and resizing step in on page only?

    Please help me asap.

    Thanks..

79. Mehul December 10th, 2007

    

    i want somehthing like

    http://www.easycropper.com/
    Here you can move crope area but you can not resize it and also you can resize and crop image in same page not like first you crop and then resize..

80. Paul December 10th, 2007

    

    To fix the crop size set both minWidth and maxWidth to the same value (800) and minHeight and maxHight to the same value (600) in: lib/init_cropper.js

    i.e. replace:
    Event.observe(window, ‘load’, function() { new Cropper.Img(’cropImage’,{onEndCrop:onEndCrop}) });

    With:
    Event.observe( window, ‘load’, function() {
    new Cropper.Img(
    ‘cropImage’,
    {
    minWidth: 800,
    minHeight: 600,
    maxWidth: 800,
    maxHeight: 600,
    onEndCrop: onEndCrop
    }
    );
    } );

81. Mehul December 11th, 2007

    

    Paul.. Thanks for your help. but its not working.

    i changed init_cropper.js but no luck at all…

    can you please tell me whats the reason?

    Thanks,
    Mehul

82. Paul December 11th, 2007

    

    Oops Sorry Mehul, my mistake I left out a }

    anyway try this instead:

    Event.observe(window, ‘load’, function() { new Cropper.Img(’cropImage’,{maxWidth: 800, maxHeight: 600, minWidth: 800, minHeight: 600}, {onEndCrop: onEndCrop});} );

83. Jonathan Christopher December 11th, 2007

    
    Author

    @Paul: Thank you so much for keeping an eye on this thread and being so helpful! I’m going to plan on releasing a GDlib version (along with a more robust demo) next week or the week after.

    @Mehul: I’m glad Paul was able to help you out!

84. acctman December 11th, 2007

    

    does anyone know if its possible to combine the 3 steps into one with no page loading? I ask the because I’d like to add the script to a registration page and I’m trying to figure out the best way to do it.

85. Mehul December 11th, 2007

    

    Ohh thanks Paul. you rock..

    Can you tell me how can i make croping and resizing in same page. I want these thing in one page only i dont want first croping and then resizing.

    Is it pissible?

86. Mehul December 11th, 2007

    

    One more thing paul..

    I have to click on the image to see the crop area. can i make appear once image get loaded. so visitor can have a idea or crop area.

87. Jonathan Christopher December 12th, 2007

    
    Author

    @acctman and @Mehul: If Paul doesn’t beat me to it, the next version will also incorporate each step in one pageload using AJAX. I plan on releasing this new version next week (December 17) if you’d like to stay tuned.

88. Paul December 12th, 2007

    

    Hi Mehul, glad that worked for you.

    Getting it all on one page is bound to be possible but is too difficult for me to work out, Best wait for Jonathans next release than try and figure it out for yourself as it’ll save quite a few hours of work.

    As for getting the cropper to show on pageload try this in place of the code above:

    Event.observe(window, ‘load’, function() { new Cropper.Img(’cropImage’,{ratioDim: {x: 4,y: 3},minWidth: 800, minHeight:600, maxWidth: 800, minHeight: 600, displayOnInit: true},{onEndCrop: onEndCrop});} );

    Hope that helps.

    Looking forward to the next release Jonathan, I’ve got a fully working GDlib version now but It’s a little bit inneficient, as I’ve pretty much done away with passing the variables from file to file with a form and have calculated the image dimensions in each file and gone from there. I’m sure it could be slimmed down a hell of alot, I also made a start with a rotating function, an input form to select an angle etc and the PHP to actually rotatate the image is easy enough but the javascript / DHTML to preview the rotation seems to be the difficult bit to get working with multiple browsers without errors. I.E is ok when using Microsoft filters but Firefox is another matter. Anyway I’ll wait for your next release before playing with it any more as it sounds like its going to be much better than what I was going to do :)

    Paul.

89. Mehul December 12th, 2007

    

    Hay paul..

    One weared thing i found.
    if i change the code to
    Event.observe(window, ‘load’, function() { new Cropper.Img(’cropImage’,{maxWidth: 800, maxHeight: 600, minWidth: 800, minHeight: 600}, {onEndCrop: onEndCrop});} );

    it worked fine i am getting image with croping area 800*600. but after that if i hit save… its not croping the image. i am getting original image.

    check http://mehuldata.freehostia.com/crop/

    any clue?

90. Jonathan Christopher December 12th, 2007

    
    Author

    While it seems there has been mostly talk about the GD version of the script, I’ve gone ahead and re-released version 1.0 using GD instead of ImageMagick. I’ll continue to work on version 1.1 including the other features outlined here including image rotation as well as more options for the cropper itself. Thanks for everyone who not only requested the GD version, but took the time to post the code here as well.

91. Paul December 13th, 2007

    

    Hi Mehul,

    After quite a bit of playing I think I got it:

    Event.observe(window, ‘load’, function() { new Cropper.Img(’cropImage’,{ratioDim: {x: 220,y: 165},minWidth: 800, minHeight: 600, maxWidth:800, displayOnInit: true, onEndCrop: onEndCrop});} );

    Thanks for the GD release Jonathan I think that it will please alot of people :) Only had a quick look but I can see starightaway its alot neater that what I got lol.

92. Jonathan Christopher December 13th, 2007

    
    Author

    @Paul: If you do get a chance to install it on your server, could you please let me know whether or not you came across any problems? I was only able to test in a couple limited environments and while everything looked just fine, it would be great to have confirmation from an outside source. Thanks very much.

93. Mehul December 13th, 2007

    

    @Paul: I used your code but still its not working. Everything else is working fine. Only crop is not working after chaging init_cropper.js.

    check out : http://mehuldata.freehostia.com/crop/

94. Paul December 13th, 2007

    

    @Mehul
    I’m really not sure why that last section of code didn’t work for you, that is the exact code (apart from the chosen dimensions) as I have in use here:
    http://www.completefisher.com/cropgdratio/

    The only difference is that I’m using a GDLib version I cobbled together whereas you must be using Jonathons original release (that uses ImageMagik?) It may be that ImageMagik is for one reason or another ignoring the JS cropper output? I really can’t help with ImageMagik as I’ve never used it. Since Jonathan has released a GD version very similar to what I am using it may be worth trying that instead of the version you have now and seeing if that makes any difference.

    @Jonathan

    I’ve put your GD version on both my localhost server and a live server (both windows servers) and on both there are a few problems with the re-sizing in the last_step.php and also problems if you don’t perform a crop (in crop_image.php) or resize (in resize_image.php) you can see what I mean here:

    http://www.completefisher.com/cropgd

    The problems of the image not being moved if a crop or re-size is skipped, is I think, a windows server issue as it doens’t seem to perfom the exec $(cmd); line. I got around these problems by using:

    // CROP WAS SKIPPED — MOVE TO CROPPED FOLDER ANYWAY…
    rename(”$sourceFile”, “$destinationFile”);

    etc.

    In place of
    // RESIZE WAS SKIPPED
    $cmd = “mv ” . $sourceFile . ” ” . $destinationFile;
    exec($cmd);

    (similar for each file affected)

    As for the last_step.php not returning the correct / chosen crop at the chosen size, I think that might not be platform specific, Rather than type out the whole section of code that works for me I’ll email you the last_step.php that I come up with - I just spent a bit of time tidying it up and replacing variable names to match those in your version, so you can see whats going on (I hope - It’s still a bit messy). The first link above uses this last_step.php file.

    Hope thats of some help
    Paul.

95. Jonathan Christopher December 13th, 2007

    
    Author

    @Paul: Thanks very much for the update — I will definitely give some attention to the Linux nature of the demo as a whole. Thanks again!

96. Mehul December 14th, 2007

    

    @Paul: finally it worked.. Thanks buddy..
    now only one thing i want is crop and resize should be in one page only.

    i tried a lot but cant do it.. can you help me please? any idea?

97. Jonathan Christopher December 16th, 2007

    
    Author

    @Paul: A silly mistake was resizing the image improperly — I’m going to go ahead and take down the download link until the new and improved version is released tomorrow.

98. Crop and Resize Images with GD or ImageMagick (v1.1) - Monday By Noon December 17th, 2007

    

    [...] the past couple weeks, conversation has picked up quite a bit surrounding the Crop & Resize with JavaScript, PHP, and ImageMagick demo I put together nearly [...]

99. Mehul B Dobariya December 25th, 2007

    

    can anybody tell me how can i make crop and resize in one page only….

100. harneet December 25th, 2007

     

     thanks dude! its really work and i m using it very well

     can u tell me how can i optimize this for best image cropping……

     :)

     again thanks dude

101. Jonathan Christopher December 26th, 2007

     
     Author

     @Mehul B Dobariya: That is not easily accomplished with the example provided. The example provided is meant to act as a starting point for custom installations.

102. Dennis Aucoin January 14th, 2008

     

     How do you upload from a link?

103. cabz January 24th, 2008

     

     excellent work dude! this is what im looking for.
     btw, is it possible to skip the resize page? how :D
     Thanks!

104. Avlesh January 25th, 2008

     

     @Jonathan - Hats off!!! Brilliant script (especially the JS part of it). I am hooked on to it for the last two days.

     @Mehul - I can understand your problem. In fact I faced it myself and none of the solutions specified above were working. When i tried getting into the code it turned out to be a JS error. The JS was not updating the recent coordinates and dimensions to the form fields and thus they were not even being sent to the backend. This seemed to work for me -

     Event.observe(window, ‘load’, function() {
     new Cropper.Img(
     ‘cropImage’,{
     ratioDim: {x:0,y:0},
     minWidth: 200,
     minHeight:200,
     maxWidth:200,
     maxHeight:200,
     displayOnInit:true,
     onEndCrop:onEndCrop,
     captureKeys:true,
     onloadCoords:null
     });} );

     I duplicated all the init parameters being used by Jonathan in his creating the instance method.

     - best
     Avlesh

 I am Jonathan Christopher. Hi.

I am currently working as a front end developer in Albany, NY. This website has been put together as a resource for other Web designers and developers to discuss our trade. You’ll find articles on Web standards, accessibility, design, and even some bits about markup and style. Would you like to find out more?