大家好,
在我的HTML代码中,存在一些UNICODE内容。 如果尝试将HTML转换为Canvas,则会生成垃圾字符。 我使用了泰米尔语UNICODE数据。
找到我的HTML内容的屏幕截图。
您能提供任何解决方案吗? 我需要这个紧急。
请尽快回复任何人。
感谢和问候,
拉梅什
@ 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/
我发现了失败的原因:
在函数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。
当我看到他/她的帖子时,我想到了尝试进行一些代码操作的方法,这确实奏效了。 答案是替换:
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对于您的问题(#289),将left|right|justify|auto
更改left|right|center|justify|auto
不会是一个更清洁的解决方案? 我怀疑您的解决方法可能会中断或在某些用例中显着降低渲染速度。
@BENYAZ它适用于我(普什图语和乌尔都语)语言。 谢谢
@BENYAZ它也适用于波斯语
@BENYAZ是的,我也确认它可以使用阿拉伯语和波斯语。
它在达里工作
var textList =(!this.options.letterRendering || noLetterSpacing(container))|| !hasUnicode(container.node.data)? getWords(characters):characters.map(function(character)
我将&&更改为||
@BENYAZ它正在使用孟加拉语。 谢谢
firafiul兄弟,您如何解决这个问题? 那是去文件改行吗? 我已经尝试了html2canvas.js的多个版本,但是我没有找到任何要替换的行(它将被新行替换)。
在htIbnAhmed html2canvas.js文件中
textList =(!options.letterRendering && ^^ left.eright <justify.eauto)
用。。。来代替:
textList =(!options.letterRendering || /^(left.eright>justifyIauto)$/.test(textAlign)||
**代替&&。 将。
@rafiul ,兄弟,您不理解我的话。 我命名为html2canvas.js的文件中没有此行。 ))) “
很难上传html2canvas.js文件吗?
从这里@IbnAhmed下载: http://3rwebtech.com/html2canvas.js
firafiul ,非常感谢兄弟:)
@rafiul您能否共享html2canvas.js文件。 谢谢
@rafiul您能否共享html2canvas.js文件。 上一个链接不起作用。 谢谢
@hiroksarker从这里https://www.dropbox.com/s/20hk1qcbm0d7far/html2canvas.js?dl=0下载
我也有同样的问题..请帮忙吗?
设置CSS:字母间距:0;
options = {letterRendering:true}
在新版本中应更改此行:
var wordRendering =(!this.options.letterRendering || noLetterSpacing(container))&&!hasUnicode(container.node.data);
有了这个:
var wordRendering =(!this.options.letterRendering || noLetterSpacing(container))|| !hasUnicode(container.node.data);
我使用css 'word-wrap:
正常解决了这个问题;'
像,<div
style =“ word-wrap:normal;”>您的文字here</div>
最有用的评论
我使用css
'word-wrap:
正常解决了这个问题;'像
,<div
style =“ word-wrap:normal;”>您的文字here</div>