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?

Answer 1

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/

Answer 2

Set the box css that have trouble to :

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

that work for me.

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