DEfusion.org.uk

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

@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

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.

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

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

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

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?

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

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

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.

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.

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.

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

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?

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 ?

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