Html2canvas: CSS styles broken after export image

[Krish2512]

Hi,
I have issue in exporting image. After image is exported using html2canvas, css of the page are missing. As a result, UI distortion is happening after we export to jpg.

I saw workaround in https://github.com/niklasvh/html2canvas/issues/504 which helped to fix the issue. Can someone please suggest if this can be moved as a fix to html2canvas into Git

[tangshuang]

I meet the same situation.

1123 is the same like question.

[mahadevshindhe]

I also faced the same problem. Still searching the solution. Is there any library extensions to avoid css issues?

[tangshuang]

Well, after researching, I found it is nomal problem dealing with svg text elements font style when using svg as html elements.
A thinkful sulotion is to convert svg text as html text outside of svg tag and position absolute to make text style work.
Another sulotion is to render svg as image in backend side as a image, when rendering load font files.

[Xilver266]

@tangshuang hey, do you have an example about that to solve the problem?

[tangshuang]

@Xilver266 it is a large code solution, and impossible to paste my code here.
You can just follow the idea to try by yourself.

[mahadevshindhe]

The solution is to remove the Unicode condition for CSS in canavas2html.js

[tangshuang]

@mahadevshindhe Could you please detail your solution?

[mahadevshindhe]

@tangshuang

I am using html2canvas version 0.5.0-alpha1.
download link https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js

Line no 2321 , remove the condition !hasUnicode(container.node.data). I am able to get Unicode text properly.

var textList = (!this.options.letterRendering || noLetterSpacing(container)) && !hasUnicode(container.node.data) ? getWords(characters) : characters.map(function(character) {
return window.html2canvas.punycode.ucs2.encode([character]);
});

[niklasvh]

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[chulander]

i'm experiencing this issue

[Saabertooth]

Edit: Also confirmed this is an issue on 1.0.0-alpha.9
fiddle: http://jsfiddle.net/patgoins/2d90yop3/

I am also experiencing this issue on 1.0.0-alpha.4

Also, the styles seem to be applied in the image export only when they are applied to the element inline.
When the styles are applied via a class, they are ignored

[kv4nt]

i'm experiencing this issue too

[ruslankonev]

me too

[mofo-is-guilty]

alpha 12 shows this issue too...

[saksham-sg01]

Why is this closed? I'm still facing this issue in the latest version. Can someone please suggest any fix or workaround they're using?

[haloriyan]

it has been 3 years, and still I didn't find solution from this issue