使用 UTF-8 字符的 Html2canvas 图像捕获问题

Question

我想捕获我的网页，为此我找到了 html2canvas，当我如下所示使用时，我的 UTF-8（波斯语）字符遇到了麻烦并且这个方向被破坏了，如你所见。

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

网页：

通过 html2canvas 捕获的网页：

你可以看到完整的例子here

我的实现有什么问题？

Answer 1

这是 html2canvas (Arabic Encoding with html2canvas) 的错误，可以通过在包装器元素上设置 text-align: left 来修复。

这是更新后的 fiddle http://jsfiddle.net/ydeL72m8/1/

Answer 2

而不是html2canvas.js文件中的句子

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

使用：

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

Answer 3

将遇到问题的方框css设置为:

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

对我有用。

Answer 4

您必须使用最新版本的库 html2canvas 才能解决您的问题；

Answer 5

只需将此行替换为新编辑的行

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

换行

return [value];

使用 UTF-8 字符的 Html2canvas 图像捕获问题

Html2canvas image capturing issue with UTF-8 characters

html

javascript

canvas

utf-8