Jcrop turns a transparent image into black

Question

I would like to use jcrop to select an area on what was built into javascript, which I cannot change. I think this javascript is interfering with jcrop. so I tried putting a transparent gif on top of everything I wanted to choose. This stopped the thing under tampering with jcrop, and I delete areas that work great. Jcrop, however, makes a transparent image black, not transparent.

Here is jsfiddle http://jsfiddle.net/andieje/rvTmX/

This is html

<img id="cropbox" src="http://deepliquid.com/projects/Jcrop/demos/demo_files/sago.jpg" style="position: absolute; left: 0px: right: 0px;" /> <img id="transparent" src="http://www.golivetutor.com/download/spacer.gif" style="width: 100px; height: 100px;position: absolute; left: 0px: right: 0px;"/> 

It just shows the transparent image associated with jcrop and how it turns black.

Is there any way around this? I don’t know much css, but it doesn’t bother me if modifcation means that the unselected area of ​​the image is no longer greyed - I just want a limited rectangle around the selected bit.

Thanks so much for any help you can give.

Answer 1

This is because the default setting for bgColor in jCrop is set to black.

Just add the parameter for bgColor to your init to be nothing and your image will be transparent:

  $('#transparent').Jcrop({ onChange: showCoords, bgColor: '' },function(){ jcrop_api = this; }); 

Answer 2

Here is the solution ( link ). I changed the image to a div with transparent color using rgba (0,0,0,0). Let me know if this is what you are trying to achieve.

<div id="transparent" style="width: 100px; height: 100px;position: absolute; left: 0px: right: 0px; background: rgba(0,0,0,0);"/>