I was pleased. I had finished integrating the fantastic Javascript Image Cropper UI into a web-app that, among other things, searches a database of images for those that are similar to a given query image. The user could now upload an image and, with the help of the UI and some server-side JAI code, search the database using a cropped portion of the image...
...in Firefox, anyway.
As of version 1.2.0 of the script, when viewed in IE (6 and 7), a white box appears around the image you want to crop, making it impossible to see what you are actually cropping. This puzzled me because when testing out the UI a couple weeks before, it had worked perfectly fine. But after reading some comments posted by other users of the UI, it appeared that I had found the reason why.
It turns out that when the image you want to crop is nested inside a combination of <table> and/or <div> tags, things start to get funky. Thankfully, one commenter found a work-around (comment #314). The fix deals with editing the script's CSS file by using transparent GIF background images instead of transparency effects. This makes the UI a little sluggish and less visually attractive, but at least it works.
First, you'll need two GIF images: one that is completely transparent (used for placing over the cropped portion of the image), and another that is a little "opaque" (used for placing over the "discarded" part of the image). The author of the fix helpfully provided two examples if you're not able to create the images yourself: transBlack.gif and trans.gif.
Second, open "cropper.css" and edit the "imgCrop_overlay" and "imgCrop_clickArea" classes as shown (the crossed-out properties should be removed, the bold-faced ones inserted):
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
filter:alpha(opacity=50);
background-image: url(transBlack.gif);
}
.imgCrop_clickArea {
width: 100%;
height: 100%;
background-color: #FFF;
opacity: 0.01;
filter:alpha(opacity=01);
background-image: url(trans.gif);
}
Third, enjoy your cropping experience...in both browsers!
Comments
hi there,
thanks a lot for this explanation of confusing comment #314. works greeat now!
I was using this cropper component on a project and the boss said, "It MUST DEPLOY NOW" but we could NOT get it to work correctly in IE7. You are my hero!
Hi Sergey,
If you need complete instructions on how to get the Cropper UI up and running, visit its website:
http://www.defusion.org.uk/code/
javascript-image-cropper-ui-using-prototype-scriptaculous/
The site provides clear instructions on how to do so. Once you've done that, you can make the changes I described above and it should work in both IE and Firefox.
That's a slick tool of your's, by the way (http://marqueetool.net/). I'll definitely have to bookmark it. :)
Hello Mike!
Can you show example of results in order to view it on all browsers?
Thanks,
Sergey Koksharov
Post new comment