Images with transparent areas appear badly in jcrop

[GoogleCodeExporter]

What steps will reproduce the problem?

1. Attach jcrop to an image with background transparency built in to the 
image. E.g., you could try the logo from my web site:

http://www.red-sweater.com/images/RedSweaterLogo.png

What is the expected output? What do you see instead?

I expect the "dimming effect" achieved by the jcrop plugin to be consistent 
across all images.  Because the dimming effect relies on a "show through" 
effect on the source image, it fails to dim and instead turns to pure black 
any areas that are transparent.

The situation is improved slightly if I manually set the background color on 
the <img> tag to white. In this scenario, the dimming appears perfectly, 
but when I select a crop area, the "dimmed" look appears inside the crop 
rectangle in areas where the image itself is transparent.

For applications where a user might reasonably provide images with 
transparencies in them,  this would a nice situation to handle more 
elegantly.

What version of the product are you using? On what operating system?

0.9.8 on a Mac OS X Leopard machine running Safari.

Original issue reported on code.google.com by jal...@gmail.com on 26 May 2009 at 5:31

[GoogleCodeExporter]

I discovered a workaround.  If I set the bgColor attribute to 'clear' then it 
ensures the 
image will at least show consistently on whatever background I happen to be 
editing 
against.

I would propose that perhaps clear is a better default bgColor than black.  But 
I am 
happy with the workaround if you don't think this is worth bothering with for 
the 
project as a whole.

Original comment by jal...@gmail.com on 26 May 2009 at 6:38

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

In my case, I have a background image (a map of this building) and a 
transparent image that is positioned over the map, to show the location of 
furnitures using markers.
I want to use Jcrop to let user select a region of the map order to be zoomed
(like googlemaps but for an indoor map).

But I found the same problem: don't know how to set up Jcrop to get the same 
visual impression as if the whole (map+markers) was a single image  

Could you please add an example of this to documentation? Thanks!

Original comment by dgsanl...@gmail.com on 20 Jul 2010 at 10:17

[GoogleCodeExporter]

Regarding jalkut workaround (bgColor: 'clear'), some comments from my own 
results:

After setting Jcrop bgColor to 'clear', Microsoft Internet Explorer raises this 
error, so Jcrop will not work:

invalid argument on jquery.min.js, line 12 char 12949

This error is somehow explained in this jquery ticket page:
http://dev.jquery.com/ticket/5509

After reporting all this to deepliquid.com as an error, I got this helpful 
answer from Kelly Hallman:

> Have you tried using bgColor: 'transparent' ?
> 
> As far as I know, 'clear' is not a valid color value.
> I am not surprised that causes a problem.

And voila!  Jcrop running also in IE with transparent images. 
Tested with the following browsers (WinXP):
- Mozilla Firefox 3.6.6
- Google Chrome 5.0.375.86
- IE 8.0.6001.18702

Thanks a lot Jcrop guys!!

Original comment by dgsanl...@gmail.com on 24 Jul 2010 at 5:21