javascript Html 2canvas捕获UTF-8字符的图像问题

7nbnzgx9 于 2023-09-29 发布在 Java

关注(0)|答案(6)|浏览(120)

我想捕捉我的网页，为了这个我找到html 2canvas，当我使用如下所示，我的UTF-8（波斯语）字符遇到麻烦，这个方向被破坏，如你所见.
超文本标记语言：

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

网页：

通过html 2canvas捕获的网页：

你可以看到完整的例子here
我的实现有什么问题？

JavaScript

来源：https://stackoverflow.com/questions/30555379/html2canvas-image-capturing-issue-with-utf-8-characters

6条答案

按热度按时间

mcvgt66p1#

这是html2canvas（Arabic Encoding with html2canvas）的一个bug，可以通过在 Package 器元素上设置text-align: left来修复。
这是一个更新的小提琴http://jsfiddle.net/ydeL72m8/1/

赞(0）回复(0）举报 2023-09-29

pxyaymoc2#

将有问题的框css设置为：

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

对我有用

赞(0）回复(0）举报 2023-09-29

xhv8bpkk3#

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

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

新行代替

return [value];

赞(0）回复(0）举报 2023-09-29

yqkkidmi4#

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

赞(0）回复(0）举报 2023-09-29

hgc7kmma5#

你必须使用最新版本的库html 2canvas来解决你的问题;

赞(0）回复(0）举报 2023-09-29

sdnqo3pr6#

将此样式添加到 Package 器对象：