DEfusion.org.uk

does anyone have a working example of how to upload and image crop and save the image?

acctman, go here. http://mondaybynoon.com/2007/01/22/crop-resize-with-javascript-PHP-and-imagemagick/

Hi, David. Your cropper works excellent on Firefox(2.0.0.11)... But absolutely doesn’t in IE (neither 6, nor 7) and Opera(9.10). I don’t know why, ‘cause i saw examples and demos. I did it almost the same way. Maybe, the reason is it coded on Prototype 1.5.0 and i’m using 1.6. Is there any updates for 1.6?

Hello!

Does anybody knows how to control(move/resize) the cropping selection programatically, using some buttons for exemple?

Thanks

I just couldn’t resist replying to this post. I mean, someone has taken the time to write a working model of code and yet someone is too lazy to figure out the rest of it on their own. They want to be spoon fed!

“Does anybody knows how to control(move/resize) the cropping selection programatically, using some buttons for exemple?”

I would recommend reading “JavaScript for Dummies” instead of just asking a question like this. Also, you might want to pick up a dictionary at the same time to take advantage of combined shipping to help reduce the cost of shipping. Alternatively, you could hire a web developer to do the work for you.

JavaScript for Dummies: http://www.amazon.com/JavaScript-Dummies-Emily-Vander-Veer/dp/0764576593/ref=pd_bbs_sr_1?ie=UTF8&s=books&qid=1197024961&sr=8-1

To Chris:
“Thanks man your advice is very useful…”

To Ionut:

Not trying to personally insult you, but in the world of developers…be prepared to carry your own weight or face criticism.

To Chris:
1. Not everybody is as experienced as you seem to be. Some are starting off. Some are knowledgeable in other areas.
2. Not everybody speaks English as a native tongue. Maybe you could offer to buy them a dictionary and save them the shipping altogether.
3. Your jive talks and quacks like a personal insult, whatever you say.
4. Why exactly couldn’t you “resist”? Whose fault is that? I don’t know when you joined the list, but you certainly managed to “resist” on the dozens of requests for assistance before this last one.

A programmer may have to carry his/her own weight. (And maybe this guy’s just starting out?) But a person has to carry more than just his weight on his shoulders.

To shovavnik:

I’ve had my share of slaps in the face when I first started. Did I let that discourage me from trying? No, I pressed on to find the answers.

But to get back on track on why I posted a comment to begin with after seeing several similar posts….if someone has taken their time to make something available for free and only ask for a voluntary donation, what else do you want? I’m just saying if you are going to take someone else’s work for free and use it, don’t expect it to be gift wrapped.

Hello!
In the end I manage to find the answer by myself… the reason I ask that question was to see if someone else had the same issue and how they manage to fix it… I believe that this is the reason we have forums … to cooperate and to make things better together.

There seems to be a problem with cropper and jquery.
If i load both jquery and cropper on the same page, the cropper doesn’t work.

I’m using Firefox 2, i load the scripts in this order:
prototype
scriptaculous
cropper
jquery

I do not use any of the jquery functions/classes.

I’ve added an alert window at line #238 (Inside Cropper.Img.prototype, in the initialize: function)
The alert window pops ups, so at least that line is run.
Firefox does not generate any error message or warning, just dead nothing.

What happens is that the image is left untouched, no special cursor, no resizable area, just an ordninary image.

How to save the cropped image?Please help me?Its very urgent.

Thanks,
Usha

Would be much better if we make it able to select circle-areas or include a magic-wand feature like photoshop…but right now, I think this is the best we can get~

@TK

yeah why dont we just upload photoshop to our websites and make each user who wants to crop anything download 500meg each time, that would be just as effective as what you want to do. or better still provide a remote desktop link to your computer on their website where a user can upload a pic to your computer, open photoshop and then modify it that way hey??

Hey, how can I cancel the cropping after selecting a portion on the image?
(rolling-back the visual to its initial state)
Thx..

Very sweet script I can’t wait to start palying with it on my site. It is exactly what i was looking for! Once I have it implemented on my wifes site she should be able to upload the pictures on her own. heheh A big thanks for making your code available to the community

Hi, this is a great work, unfortunately it does not work using scriptaculous version 1.7. It seems that it works with no problem “no matter” the version of prototype, but the version for scriptaculous has to be 1.6.
It gives 2 errors (using firebug)
1. Class is not defined
[Break on this error] var CropDraggable=Class.create();
cropper.js (line 18)
2. Cropper has no properties
(no name)()update (line 50)
[Break on this error] new Cropper.ImgWithPreview(

The same error occurs, when you dont load the scriptaculous library, so that is a starting point

Forget what I comment bellow, I was trying using Symfony, and I forgot to load the cropper library AFTER scriptaculous. ;P
Sorry…. ANd this library ROCKS!!!

How do I make ratioDim optional when instantiating a Cropper.ImgWithPreview object? If I do it like this:

ratioDim: { x: 0, y: 0}

...or remove the ratioDim declaration completely from the Cropper.ImgWithPreview call, I have to click the image TWICE to get the cropper. First click shows the preview, 2nd click enables the cropper. How can I make an Cropper.ImgWithPreview object without using ratioDim ?

Just to clarify my previous comment, I want to set a minWidth and minHeight but NOT constrain the proportions, like so:

Leaving out ratioDim doesn’t seem to work. Is it required?

Ummm.. . crap.. ignore my code sample. :(

Hmm i don’t see how i can add feature requests or bug reports, so I’m just going to post it as a comment.
Heres and alternate attachCropper function for example-DynamicImage.html that will allow you to load the crop area that you had before you removed it and even enter it in the input and then load it. It makes it allot more usefull if you want to have other tools then just crop and don’t want to start over on the selection each time you have made some other adjustments to the image.

This might be a cousin of 00027 but when I had the cropper image inside a hidden div, clicked the ‘Remake Thumb’ tab to show it, it wouldn’t work. I was previously using an HTML Component and then I found this little gem and was super excited to update my photo gallery and have it work in FF as well. I still works beautifully, I just can’t have it in a hidden div.

Anywayz, regardless of the hidden div issue, this is an awesome script. Kudos/Many thanks to Dave. People like him make the Internet great.

Hello,

This is great work.
The only problem i have is that when a click happens anywhere in the page i put the crop script, its launching the callback function.
I saw that the mouse release event was the trigger in the code.
Is there a way to make that mouse release/click only calling the function when the mouse is over the image and not aywhere in the page ?

Thanks a lot.

David.

Great script—we need the highlighted crop area to save to the server using PHP (to pass to GD libary)... anyone have any examples using this js with PHP? we’re at the point where the crop tool captures the coords, but how do we capture the ouput, to pass to the gd library, to resize? thanks! paul

@paul

I created a proof of concept for a client with a specific feature set requirements. I implemented a backend PHP script to do the uploading, cropping and saving. Recently another user emailed me for a copy of the code and I zipped it up for him. I’m happy to make this available to anyone who wants to download it… You can read about my specific implementation in this series of posts:

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/comment-page-9/#comment-27233

You can download a zip file of all the code (js and PHP) here:

http://gattomatto.net/work/jsCropperUI.zip

Please be aware however, this code was only build as a proof of concept, and never made it into their web site. As such the code is a bit sloppy.. But it is all there, and anyone with reasonable PHP skills will be able to take this code and work it into something more robust. And if you or anyone does that, I encourage you to post a link to your results… I’d like to get a copy of that myself!

Thanks,

– m@

Hi. I realy like the work you have done, and I’m trying to use it in my site but facing this problem (only in IE and not in FireFox):
1) I’m dynamically changing the main picture the user can work with (by clicking on a strip of thumbnails).
2) when such a change occures, I set the HTML ID of the selected image to be “theMainPicture”.
3) I also create a new instance of the Cropper object: new Cropper.Img( ‘theMainPicture’, { onEndCrop: onEndCrop }
4) All is working fine for the first selection but when user is choosing a different image, he can select areas on it, but the X & Y coordinates are always the ones of the first selection.

Can you help please?

Hello Dave.
When I tried to implement the “dynamic” example, I got this error:
“Event.observe is not a function”
Any ideas?

Hi,

I just wanted to express my gratitude for this tool. It’s EXACTLY what I have been looking for for some time now.

I’ve successfully integrated it into our web based photography display/design/ordering system and am translating its output for use on full resolution files in our production system. Having this available will have dramatically positive impacts on the time it takes to produce our orders. (Not to mention how much fun our customers are having using this and seeing precropped images in their collage previews).

You’ve just saved us a great deal of time and potentially boosted sales- thank you!

Regards,
Micheal

@Micheal Hall,
if thats the case you wont mind donating to the author of this cool script, that way he might get a new version up and running for us all before we retire in 30 years. just click the donate button somewhere on this site.

Is it possible to quickly modify the existing code to work with Prototype 1.6 and Scriptaculous 1.8? A new site I am working on is built on the latest versions of Prototype and Scriptaculous and everything is great, but when I go to integrate the Image Cropper I get nowhere. Various errors are reported, but I am not real sure where to go for troubleshooting. Any chance you can quickly see why the Cropper doesn’t work with the latest and greatest? It works as intended with the older versions, but when you just switch to the new version of code the Cropper fails. We regularly donate to sites and outfits who provide us with solutions.

@TheIceMan5
You’re absolutely right – I donated before I posted my appreciation for the tool.

@Dave
You’re welcome, I really appreciate that you created this tool and made it available. I’m watching our production system churn its way through orders right now – I’ve photographed three events since I first implemented your UICropper and it has really made a difference in the customer’s experience. For us as photographers, being able crop images as we layout collages on the screen in front of the customer makes a substantial difference – they can now see more clearly what we see when we look at the images and it allows them to purchase with more confidence in what they will be receiving. You should hear the ‘ooohs’ and ‘aaahs’. :)

Great stuff!

Regards,
~Micheal

Thank you! Great script.
There is little bug(?) when using with IE7 without HTML 4.01 Transitional in quirk mode. I was forced to remove standart course multitr table height100% bug in IE.
It can be “fixed” with this:
.imgCrop_overlay {
background: URL(semitrblack.gif) fixed;
/* opacity: 0.5;
filter:alpha(opacity=50);*/
position: absolute;
width: 100%;
height: 100%;
}
where semitrblack.gif is semitransparent gif image.

And sorry for mein englendo language. ))))

And there was little problem with absolutly white image. After refresh of the page everything is ok. But with new image for crop the same picture. Fixed with:
.imgCrop_handle {
position: absolute;
border: 1px solid #333;
width: 6px;
height: 6px;
background: URL(tr.gif) fixed;
opacity: 0.5;
filter:alpha(opacity=50);
z-index: 4;
}
I don’t know. May be this problems mine only.
FF and Opera work ok.

Awesome job! This is exactly what I was looking for. I only wish you had a jQuery version.

Hi, very nicely done

But I have a question though. Do you keep track of all the area’s that get highlighted? I tried to use the script in combination with an ajax script that loads the image.
When the image is loaded, I call a method to initialize the events. I got that working. When I select an area and onEndCrop is loaded, I reload the image via the server (It’s a map where I try to zoom in).
But here it goes wrong. When I do it again, the script is called twice, with the coordinates from the first time and the ones from now.

I tried a lot, but could not find a solution.
Thanks anyway

Hi i would like know if it’s possible disable the resize option. I need to pass coords on load, but without resize the crop. Is it possible?

Tks a lot! ;-)

If I get this doing what I need it to in my project, I’m donating..

Looks great.. thanks

I almost have this wonderful tool doing magic… the only problem is that no matter what I do, I can’t seem to remove the onEndCrop co-ordinates/dimensions from images once they’re removed from the DOM. In other words, once I’ve loaded a second image called with an ID the same as the first (though the first is removed from the DOM) I get all the old dimensions followed by the new ones when onEndCrop is called; I think this is the same thing that is referred to in the comments in the script as ”#00015” (onEndCrop callback gets called multiple times when removed and then reapplied). Everything on my page is pretty AJAX-y, and I simply cannot get the my cropper to remove() itself. I’ve looked at the dynamic-image example but can’t grok it; my case is pretty different. Tips??? THANKS!

Hi, I appreciate your help. I’m really just calling each one with this:
“new Cropper.Img(theImageID, { onEndCrop: onEndCrop });”

I’m then removing a DOM node that contains my image and all the new nodes created by Cropper, and then recreating the node and the various bare images in it, and applying the above line for each image ID.

I have changed the onEndCrop function in your cropper.js to return the ID its referring to (in addition to the coordinates/dimensions), so I can keep track of the co-ordinates of more than one image at a time…

I’d use the example if I could, I just can’t seem to find a way to get my varying imageIDs into the “new Cropper.Img” call in attachCropper…. I must seem silly but I feel I’m so close, and there are other people on this forum who also seem to long for a way to easily remove the cropper…. I see the “remove:function()” in “cropper.js”, if only I could pass my imageID to it!!