Html2canvas: Opacity

It depends on how you are using the opacity. Put a example using jsfiddle.

I've been trying to get Opacity to work too and it doesn't appear to maintain it.

I have an image in a div. The div has inline css opacity: 0.78; but on the screenshot it's 100% opaque.

@Dayjo Browser? OS? x86 or x64? Put a jsfiddle example please =)

OSX 10.11.4
Firefox 44.0.2
Chrome 49.0.2623.112

Edit: OK so I seem to have resolved this by adding some extra CSS to the img tag. I've set explicitally;

display: block;
position: static;

And now images support the opacity, though not sure why it needs to be block, and position: relative seems to actually stop it from working. Other elements that are not position:relative (i.e. a div with some text in) were working fine.

Here is a jsFiddle exemplifying the issue: http://jsfiddle.net/tqqaa16x/. I'm struggling with this as well.

Opacity doesn't seem to work with the simplest of examples:
https://jsfiddle.net/JoolsCaesar/yLj4qwe2/3/
https://jsfiddle.net/JoolsCaesar/yLj4qwe2/5/
(Tested in Chrome)

Fixed in https://github.com/niklasvh/html2canvas/tree/v1.0.0

@niklasvh Still having the same issue using version 1.0.0-alpha.12 I have a div with rounded corners, the website background is dark but on the saved image it has white corners when they should be transparent.

EXAMPLE:

This is also not working for me. Opacity is lost.

@andy

@niklasvh Still having the same issue using version 1.0.0-alpha.12 I have a div with rounded corners, the website background is dark but on the saved image it has white corners when they should be transparent.

EXAMPLE:

You should use the background-color: rgba(x,x,x,opacityValue) replace for opacity css style should be resolve your problem.

Fixed in https://github.com/niklasvh/html2canvas/tree/v1.0.0

this link is not working now!

I can confirm that opacity is still not working in the latest release: 1.0.0-rc.7. Perhaps we can get this ticket re-opened?

I can confirm that opacity is still not working in the latest release: 1.0.0-rc.7. Perhaps we can get this ticket re-opened?

Use this version: https://github.com/niklasvh/html2canvas/suites/1187063696/artifacts/17429870 , Opacity will be work.

I can confirm that opacity is still not working in the latest release: 1.0.0-rc.7. Perhaps we can get this ticket re-opened?

Use this version: https://github.com/niklasvh/html2canvas/suites/1187063696/artifacts/17429870 , Opacity will be work.

What exactly is this that you linked me to? I opened it up and it says it's v1.0.0-rc.7...

I can confirm that opacity is still not working in the latest release: 1.0.0-rc.7. Perhaps we can get this ticket re-opened?

Use this version: https://github.com/niklasvh/html2canvas/suites/1187063696/artifacts/17429870 , Opacity will be work.

What exactly is this that you linked me to? I opened it up and it says it's v1.0.0-rc.7...

version name is same but in this js file, opacity bug is fixed.

I can confirm that opacity is still not working in the latest release: 1.0.0-rc.7. Perhaps we can get this ticket re-opened?

Use this version: https://github.com/niklasvh/html2canvas/suites/1187063696/artifacts/17429870 , Opacity will be work.

What exactly is this that you linked me to? I opened it up and it says it's v1.0.0-rc.7...

version name is same but in this js file, opacity bug is fixed.

Perhaps you could make a pull request so the entire community can benefit from this fix and we can continue to utilize yarn (or npm) for the html2canvas dependency?

@niklasvh I just started using html2canvas in my project and it's great! But I am also running into this opacity bug - does the bundle above fix this issue / is there any chance you could release it and update the released npm package?

@davidswinegar this worked for me. The last number being the opacity

background-color: rgba(25, 163, 71, .5);