こんにちは、みんな、
私のHTMLコードには、いくつかのUNICODEコンテンツが存在します。 HTMLからCanvasに変換しようとすると、ジャンク文字が生成されます。 タミル語のUNICODEデータを使用しました。
私のHTMLコンテンツのスクリーンショットを見つけてください。
解決策を教えてください。 私はこの緊急が必要です。
できるだけ早く誰かに返信してください。
ありがとうございます。それでは、お元気で、
ラメッシュ
@ ramesh-gitそれは本当に_BUGhtml2canvas_でさえあるようです。
「fillText」でテストして問題ありませんでしたが、「html2canvas」を使用した場合。 いくつかの文字が奇妙な絵(正確には円)に置き換えられました。
指定できる唯一のクイックフィックス:
html2canvasを実行する前にテキストのキャンバスを作成し、元のテキストとオーバーラップさせる必要があります(
position: absolute;
と、元のテキストはvisibility: hidden;
を受け取る必要があります-テキストをスパンタグ内に配置する必要がある場合があります。スパンタグは非表示にする必要があります。)、コールバック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>
バグ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に感謝します。
彼/ shesの投稿を見たとき、私はいくつかのコード操作を試してみようと思いました、そしてそれは信じられないほどうまくいきました。 答えは置き換えることです:
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 =!
と置換する:
textList =(!options.letterRendering |||
** 代わりに &&。 意志。
@rafiul 、あなたは私の言葉を理解していなかった兄弟。 私がhtml2canvas.jsと名付けたファイルには、この行が含まれていません。 ))) "
html2canvas.jsファイルをアップロードするのは難しいですか?
ここから@IbnAhmedダウンロード: http://3rwebtech.com/html2canvas.js
firafiul 、どうもありがとう
@rafiulplsはhtml2canvas.jsファイルを共有しますか。 ありがとう
@rafiulplsは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:
normal; '
,<div
style = "word-wrap:normal;">テキストhere</div>
最も参考になるコメント
私はこの問題を修正しました。css
'word-wrap:
normal; ',<div
style = "word-wrap:normal;">テキストhere</div>