9

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

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

这是我使用的简单代码：

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

html2canvas 如何呈现 div

任何线索？

4

8 回答 8

5

我想尝试一些代码操作，但效果非常好。答案是替换：

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

注意 (&&) 符号被 (||) 替换。

于 2015-06-22T23:43:24.437 回答
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. 您可能需要<meta http-equiv="content-type" content="text/html; charset=UTF8">在 html 文件的开头添加。

现在一切都会像魅力一样工作！感谢让我得到最完整答案的答案。

于 2018-10-09T11:22:42.637 回答
1

请确保你做了正确的“文本对齐：正确；” 在每个阿拉伯元素中

text-align: right;

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

于 2015-09-30T09:34:35.737 回答
0

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

于 2013-03-17T10:41:25.783 回答
0

它是html2canvas. 可以通过设置内容 CSS 来解决此问题：

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

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

于 2015-03-20T15:55:51.070 回答
0

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

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

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

于 2020-04-11T09:01:22.113 回答
-1

我有同样的问题，我找到了这个解决方案并且对我很有用。

我解决了这个问题，使用 css 'word-wrap: normal;'

喜欢 ，<div style="word-wrap: normal;">حروفك العربية يجب ان تكون هنا</div>

于 2021-08-28T16:43:14.090 回答
-1

使用版本1.0.0-alpha.12，建议的解决方案都没有帮助处理希伯来语文本。我需要一个快速的解决方案，所以作为最后的（也是肮脏的）手段，我在第 3289 行更改了 fillText 行为

从：

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

至：

var letterRendering = true;

正如@Kaiido 所建议的那样，此解决方案将影响性能（请参阅评论）。我在这个插件中的使用仅限于一个非常小的容器，所以它是不引人注意的——但你应该考虑到这一点。

于 2018-11-14T13:45:27.097 回答