jcrop turns transparent image black

Question

I would like to use jcrop to select an area on something that has built in javascript which I can't modify. This javascript is interfering with jcrop i think. so I tried putting a transparent gif over the top of the thing I would like to select. This stopped the thing underneath interfering with jcrop and I coudl select areas fine. Jcrop, however, is making the transparent image black rather than transparent.

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

This is the 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;"/>

This just shows a transparent image linked to jcrop and how it becomes black.

Is there any way I could work around this? I dont know much css but I'm not bothered if the modifcation means that the unselected area of the image isn't greyed out anymore - I just want the bounded rectangle around the selected bit.

thanks very much for any help you can give

score 11 · Accepted Answer · answered Aug 19 '13 at 17:33

11

That is because the default option for bgColor in jCrop is set to 'black'.

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

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

answered Aug 19 '13 at 17:33

putvande

15,068
3
34
50

or set it's opacity like this: `.jcrop-holder { opacity: 0.5; }` http://jsfiddle.net/sperske/rvTmX/5/ – Jason Sperske Aug 19 '13 at 17:36
True, but you need to set more opacity parameters for cross browser support. And it is also possible to add the `bgOpacity` option in the init. – putvande Aug 19 '13 at 17:40
1

Seems rather well supported: http://caniuse.com/css-opacity but bgOpacity would certainly remove all doubt :) – Jason Sperske Aug 19 '13 at 17:42
bgOpacity in the init does not change the fact that having jcrop on an image with transparent pixels (png) will render a black rectangle – Anders Lindén Dec 09 '14 at 08:52
Using .jcrop-holder { opacity: 0.5; } will change the opacity of the image as well. – Anders Lindén Dec 09 '14 at 08:54

score 0 · Answer 2 · answered Aug 19 '13 at 17:33

Here is the solution (link). I changed the image to a div with transparent color by 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);"/>

jcrop turns transparent image black

2 Answers2

Linked