Opacity

[lmbuffetti]

Hi,

I should create a canvas from webpage and I found your plugin, it works very well but I want say if it is possible to maintain the opacity of each element. In this moment it doesn't work.

Best Regards

[brcontainer]

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

[Dayjo]

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.

[brcontainer]

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

[Dayjo]

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.

[chughes87]

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

[JoolsCaesar]

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)

[niklasvh]

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

[andywillekens]

@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:

[day]

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

[hungpp250795]

@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.

[nurulalamador]

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

this link is not working now!

[fated-x]

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?

[nurulalamador]

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.

[fated-x]

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...

[nurulalamador]

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.

[fated-x]

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?

[davidswinegar]

@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?

[jacobzirbel]

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

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

[rvirino]

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

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

Yess! The best and fast solution! Thanks!!