UTF-8 字符的 Html2canvas 图像捕获问题答案

【问题标题】：Html2canvas image capturing issue with UTF-8 charactersUTF-8 字符的 Html2canvas 图像捕获问题
【发布时间】：2015-08-13 20:14:01
【问题描述】：

我想捕获我的网页，为此我找到了 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

我的实现有什么问题？

【问题讨论】：

谁能帮帮我？？

标签： javascript html canvas utf-8

【解决方案1】：

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

这是一个更新的小提琴 http://jsfiddle.net/ydeL72m8/1/

【讨论】：

非常感谢。我正要问关于马拉雅拉姆语的同样问题。你保存了我的项目

【解决方案2】：

设置有问题的box css为：

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

这对我有用。

【讨论】：

【解决方案3】：

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

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

换行

return [value];

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：