Html2canvas: Unicode字体问题

创建于 2013-06-10 · 21评论 · 资料来源: niklasvh/html2canvas

大家好，

在我的HTML代码中，存在一些UNICODE内容。如果尝试将HTML转换为Canvas，则会生成垃圾字符。我使用了泰米尔语UNICODE数据。
screenshot-7

找到我的HTML内容的屏幕截图。
您能提供任何解决方案吗？我需要这个紧急。
请尽快回复任何人。

感谢和问候，
拉梅什

Bug Unicode

资料来源

ramesh-git

最有用的评论

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

像,<div style =“ word-wrap：normal;”>您的文字here</div>

rcwebd 于 2020-06-05

👍3 🚀1

所有21条评论

@ ramesh-git似乎确实是_BUG html2canvas_甚至。

我使用“ fillText”进行了测试，没有问题，但是使用“ html2canvas”时。有些字符被一个奇怪的图画代替了（确切地说是一个圆圈）。

您可以指定的唯一快速解决方案：

您必须先运行其文本的画布，然后再运行html2canvas并将其与原始文本重叠（使用position: absolute; ，原始文本应会收到visibility: hidden; -可能必须将文本放在span标记内， span标签应该被隐藏。），当您运行回调onreaded您将删除（或隐藏）画布（文本）。
注意：请记住，每当您提出将使用“客户端”代码的问题时，请使用http://html2canvas.hertzen.com/等网站在线添加示例（我已在您的问题中添加了示例，因此它将让开发人员更容易。）

fillText示例：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body{
  background:#ccc;
}
canvas{
  background:#fff;
}
</style>
<canvas id="e" width="600" height="200"></canvas>
<h1 id="a1">தமிழ் ஊடகங்கள் கூடுமிடம்-பொங்குதமிழ்-  World of Tamilconverters</h1>
<script>
    var canvas = document.getElementById("e");
    var a1 = document.getElementById("a1");

    var context = canvas.getContext("2d");
        context.fillStyle = "#000";
        context.font = "bold 16px Arial";
        context.fillText(a1.innerHTML, 10, 20);
</script>

bug html2cavans示例：
http://jsfiddle.net/6KvLk/

brcontainer 于 2013-06-26

我发现了失败的原因：
在函数renderText(el, textNode, stack) ，更具体地在行： 1186中：
我们有这个： : textNode.nodeValue.split(""); （此分割用于普通字符）

对于``unicode文本''，您需要添加具有以下值之一的属性text-align （css）： left ， right和justify 。

注意：并且不要使用属性letter-spacing ：

尝试：

<h1 id="a1"><span style="text-align:justify;">தமிழ் ஊடகங்கள் கூடுமிடம்-பொங்குதமிழ்-  World of Tamilconverters</span></h1>
<script>
    var a1 = document.getElementById("a1");
    html2canvas(a1,{
        "onrendered":function(canvas){
            document.body.appendChild(canvas);
        }
    });
</script>

brcontainer 于 2013-06-29

非常感谢brcontainer。
当我看到他/她的帖子时，我想到了尝试进行一些代码操作的方法，这确实奏效了。答案是替换：

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”）））

请注意（&&）符号，该符号由（||）代替。

BENYAZ 于 2014-08-16

👍1

usmonster 于 2014-08-20

@BENYAZ它适用于我（普什图语和乌尔都语）语言。谢谢

moxet 于 2015-03-01

@BENYAZ它也适用于波斯语

molaie 于 2015-09-02

@BENYAZ是的，我也确认它可以使用阿拉伯语和波斯语。

azerafati 于 2015-09-10

它在达里工作
var textList =（！this.options.letterRendering || noLetterSpacing（container））|| ！hasUnicode（container.node.data）？ getWords（characters）：characters.map（function（character）
我将&&更改为||