Html2canvas image capturing issue with UTF-8 characters

Question

I want to capture my webpage, In order to this I find html2canvas, when I use as shown below ,my UTF-8 (persian) characters get in trouble and this direction destroyed as you see.

HTML:

   <div id="wrapper">
        <span>این کاراکتر ها بهم میریزند</span>
    </div>

JavaScript:

$(document).ready(function() {
    html2canvas($("#wrapper"), {
        onrendered: function (canvas) {
            theCanvas = canvas;

            document.body.appendChild(canvas);

            canvas.toBlob(function (blob) {
                saveAs(blob, "Dashboard.png");
            });
        }
    });     
});

WebPage:

enter image description here

Captured WebPage via html2canvas:

enter image description here

you can see full example here

What is wrong with my implementation?

score 6 · Answer 1 · edited May 23 '17 at 12:33

6

This is a bug with html2canvas (Arabic Encoding with html2canvas) and can be fixed by setting text-align: left on your wrapper element.

Here's an updated fiddle http://jsfiddle.net/ydeL72m8/1/

edited May 23 '17 at 12:33

Community

1
1

answered May 31 '15 at 12:35

mpallansch

1,174
6
16

Thanks a lot. i was about to ask the same question on malayalam language. You saved my project – persistent_poltergeist Mar 24 '16 at 14:50

score 2 · Accepted Answer · answered Apr 11 '20 at 09:05

2

Set the box css that have trouble to :

text-align: left; //or right or justify

that work for me.

answered Apr 11 '20 at 09:05

Zahra Badri

1,656
1
17
28

score 2 · Answer 3 · answered Jan 02 '21 at 15:35

2

Just replace this line to new edited line

return styles.letterSpacing !== 0 ? toCodePoints(value).map(function (i) { return fromCodePoint(i); }) : breakWords(value, styles);

new line instead

return [value];

answered Jan 02 '21 at 15:35

Alireza Balvardi

150
1
7

score 1 · Answer 4 · edited Mar 12 '19 at 20:30

Instead of the sentence in the html2canvas.js file

textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ? textNode.nodeValue.split(/(\b| )/) : textNode.nodeValue.split("");

use:

textList = (!options.letterRendering && /^(left|right|justify|auto|center)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ? textNode.nodeValue.split(/(\b| )/) : textNode.nodeValue.split("");

score 1 · Answer 5 · answered Jul 12 '20 at 07:28

1

you must to use last version library html2canvas this reslove your problem;

answered Jul 12 '20 at 07:28

e sadeghi

43
4

wahbifadhillah · Answer 6 · 2022-08-11T04:06:45.607

0

Add this styling to the wrapper object:

letter-spacing: normal !important;

source : Arabic font rendering

edited Aug 11 '22 at 04:06

answered Aug 11 '22 at 04:04

wahbifadhillah

1
2

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 15 '22 at 03:26

Html2canvas image capturing issue with UTF-8 characters

6 Answers6

Linked