Search

Crop & Resize with JavaScript, PHP, and ImageMagick

Posted: January 22, 2007 Comments(105)

Update: A new version of this example and demonstration has been released. Version 1.1 includes a GD version of the script as well as a number of functional improvements worth checking out.

Update: There has been significant discussion in the comments regarding a GD version of this script. I have re-released v1.0 of this example as a GD version as well as an ImageMagick version. You can find both downloads below The download has been removed in preparation of version 1.1 due for release on December 17, 2007. They behave function exactly the same as one another. Thanks for all the contributions (Stefan Leever and others) and requests!

Image management is often a big part of a comprehensive CMS, and in my personal experience, has been one of the more difficult areas to make really easy for people to use. Those that are technically inclined are often able to successfully format an image to their liking if given proper instruction. On the other hand there are many who find image editing to be difficult, intimidating, and/or confusing.

View JavaScript Crop & Resize Demo

The demos and downloads have been removed temporarily due to a security issue. Replacements will be linked as soon as possible. Thank you for your patience. Please discontinue use as soon as possible until a revision has been posted.

In an effort to better the situation, I put together a demo which gives the end user the ability to upload, crop, and resize their image from within their Web browser. The intention, on my end, would be to use it for server-side image pre-processing before the image is used by a client in their CMS for their website.

What powers JavaScript cropping & resizing

This demo wouldn’t be possible without a number of scripts that can not go without mention. First and foremost, the entire client side process is based on the Prototype JavaScript Library. Prototype has just been updated to version 1.5.0 and it acts as the foundation for both the crop and resize stages of the demo.

Another essential piece of this demo is script.aculo.us, a collection of effects addons for Prototype. It provides some really excellent UI tools to work with as well as various animation effects. Both the crop and resize stages use script.aculo.us features.

JavaScript Image Cropper UI by Dave Spurr

In my opinion, the most comprehensive aspect of this JavaScript image crop and resize demo is the cropping stage. The JavaScript Image Cropper UI by Dave Spurr is a script that deserves the spotlight in the demo. It was written using both Prototype and script.aculo.us and it is the one piece that really brings the demo together.

Dave’s JavaScript Image Cropper UI has many more capabilities than the basic version included in the demo. If you check out his documentation he includes cropper user interfaces that can inherit various options such as retaining an aspect ratio, min/max width/height, and also display a crop preview if desired. The JavaScript Image Cropper UI by Dave Spurr is a feat in and of itself and should be given proper recognition.

Server requirements

The provided demo was written for a Linux based Web server running PHP and having ImageMagick installed. It should run on a Windows based server with minimal adjustments, such as including the path to your ImageMagick install for each command.

ImageMagick is a powerful command line image editor which performs all of the actual image transformations server-side. Installation is usually quite easy after following directions written for your Web server configuration.

Installation notes

After you’ve downloaded the demo, extract the files to a common directory and upload that folder to your server. After uploading, the directory will need to be given write permissions. Failing to do so will destroy the functionality of the demo as uploads won’t be saved and there would be no way to create the adjusted images.

Download ImageMagick Crop & Resize (.zip)

The demos and downloads have been removed temporarily due to a security issue. Replacements will be linked as soon as possible. Thank you for your patience. Please discontinue use as soon as possible until a revision has been posted.

Closing thoughts about cropping and resizing with JavaScript

This demo was put together in an effort to make very basic image editing easier for less technically inclined users. The main intention is to provide it as a component to include in a variety of applications including custom content management systems or Web applications.

I hope the demo proves to be useful, but I absolutely welcome any comments and criticisms readers may have. Please take a minute to post your thoughts below so that the demo can be in constant revision to ensure it’s effectiveness.

Related Content

  1. Crop and Resize Images with GD or ImageMagick (v1.1)
  2. JavaScript, JavaScript
  3. New to PHP 5.4: Traits

Categories

Categories Development

Tags

Tags , , , , , , , ,

Get my newsletter

Receive periodic updates right in the mail!

  • This field is for validation purposes and should be left unchanged.

Comments

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

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

  6. @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. 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. @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. […] 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) […]

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

  15. 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. @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!

  19. > – 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. 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. 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.

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

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

  32. 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. 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. 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. @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. 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. 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. @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. @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. 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. 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. 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. 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. hi,
    can I use this demo zip on my website and why the images are beeing deleted after 5 minutes?

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

  50. “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. 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. 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. Nevermind my last post, it was a bit premature. Everything is working fine now. Awesome program!

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

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

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

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

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

  77. @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: 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. 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..

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

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

  96. @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?

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

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

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

  105. I’m on the fence about this, while more customization is good, I have a feeling this is a “in-progress” update, it just feels incomplete and half-way there.
    We use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout “feels like” it had larger images,
    maybe because the images were cropped more loosely so it’s easier to tell which project it was at quick glance. Now the image is cropped closer, making it
    harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
    efficient.
    I have a couple suggestions that might make it work better:
    1. Increase the height of the window the cover image is being displayed.
    2. Let us to choose which image to be displayed as “cover” (like how Pinterest handles cover images of each board, was hoping for this for a long time)
    3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
    shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
    4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
    in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
    element already)

Leave a Reply

Your email address will not be published. Required fields are marked *