使用html2canvas进行阿拉伯语编码

Question

我正在使用html2canvas拍摄div的图像，内容来自同一页面，相同的域名，但它显示阿拉伯字母断开连接，似乎html2canvas不支持阿拉伯语。

当我在其网页上阅读有关它的可用详细信息时，我没有找到任何有用的信息。

以下是我使用的简单代码：

$("#import").click(function(){
    // send the contents of the email :)
    html2canvas(document.body, {
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
        },
        letterRendering:true
    });
});

任何线索？

Answer 1

我想过尝试一些代码操作＆amp;它无法生存。答案是替换：

textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing")))

使用：

textList = (!options.letterRendering || /^(left|right|justify|auto)$/.test(textAlign) || noLetterSpacing(getCSS(el, "letterSpacing")))

注意（＆amp;＆amp;）符号被（||）替换。

Answer 2

我终于找到了答案，需要三个步骤：

1. 您需要确保html2convas js文件支持从右到左的语言，例如波斯语，阿拉伯语或希伯来语，是的，您不能相信有两个不同的文件，也许一个文件较旧，另一个文件具有已进行了更新，例如，如果您使用https://files.codepedia.info/files/uploads/iScripts/html2canvas.js，则不能正确使用https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js，而不能正确使用从右向左的语言。

2. 现在您已经选择了html2canvas.js的真实版本，您需要为元素使用text-align: right;。（注意：并非所有元素都需要它，您可能只需将其设置为元素的父级。）

3. 您可能需要在HTML文件的开头添加<meta http-equiv="content-type" content="text/html; charset=UTF8">。

现在一切都将如魔法般运作！ 多亏了使我获得最完整答案的答案。

Answer 3

请确保哟做得正确“text-align：right;”在每个阿拉伯语元素中

text-align: right;

http://jsfiddle.net/8ypxW/2022/

Answer 4

您使用的是UTF-8编码吗？如果你脑子里没有<meta http-equiv="content-type" content="text/html; charset=UTF8">，那肯定不会工作:)希望这会有所帮助。

Answer 5

这是html2canvas中的错误。通过设置内容CSS可以解决此问题：

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

在此处阅读更多内容：https://github.com/niklasvh/html2canvas/issues/226#issuecomment-20232693

Answer 6

使用版本 1.0.0-alpha.12 ，所有建议的解决方案均未对希伯来语文本有所帮助。我需要一个快速的解决方案，所以作为最后（也是肮脏）的解决方法，我 更改了3289行上的fillText行为

发件人：

var letterRendering = parent.style.letterSpacing !== 0;

收件人：

var letterRendering = true;

如@Kaiido所建议，此解决方案将影响性能（请参阅评论）。我在此插件中的使用仅限于一个非常小的容器，因此不明显-但您应该考虑这一点。

Answer 7

在html2canvas.js中找到此行，并像这样添加中心：

sometext

然后在每个有问题的框中设置text-align：right / left / canter / justify。它对我很好。