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:

Captured WebPage via html2canvas:

you can see full example here

What is wrong with my implementation?

Babette

Answer 1

Set the box css that have trouble to :

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

that work for me.

Giralda

Answer 2

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/

Cienfuegos

Thanks a lot. i was about to ask the same question on malayalam language. You saved my project – Ewing

Answer 3

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];

Vshaped

Answer 4

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("");

Carious

Answer 5

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

Bionics

Answer 6

Add this styling to the wrapper object:

letter-spacing: normal !important;

source : Arabic font rendering

Footwall

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

Answer 7

I faced the same messy Arabic letters with only <h1.. h6> elements, I solved it by using styled p [Paragraph] elements instead.

Interlock

Answer 8

I faced the same issue in version 1.4.1 and fixed it by adding

letter-spacing: normal;

to the wrapping element

Thissa