私のプロジェクトに取り組んでいると、 と を使用して画像によってレンダリングされたテキストの表示に問題があることに気付きましcanvas
たJQuery
。
コード:
//get values
var current = $(".activeText a div").attr('id');
//get font family
var fFamily = $(".activeText a .fontType-cont").val();
// default remove old
$(".customize-Container #draggable").remove();
//create a canvas for image converting
$(".customize-Container").append("<div id='draggable'><canvas id='"+current+"'></canvas></div>");
//create canvas
var canvas = document.getElementById(current),
ctx = canvas.getContext('2d'),
img = document.createElement('img');
//draw it
img.onload = drawSmall;
img.src = $(".activeGColor").find('img').attr('src');
function drawSmall() {
var text = $("#fontEnter").val();
//define new font size
howMuch = startFontSize - howMuch;
//define var with new font size
startFontSize = howMuch;
//define text font size and family
ctx.font = howMuch + 'px ' + fFamily;
//fill with the text
ctx.fillText(text, 10, 100);
//draw text
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(img, 10, 20, 500, 100);
}
これがリサイザー内の関数です。この特定の関数は、テキスト サイズを小さくします。同様のコードを使用してテキストを表示する前に、何が起こるかは完全に機能します。この関数が選択されると、テキストが消えてプロセスが終了せず、キャンバスが空白のままになります。
私はalert()
それがどこで止まるかを見てきましたが、機能img.onload = drawSmall;
に入らずに止まるようです。drawSmall()
これは Chrome と IE で完璧に動作します (<-- うわー?) 提案を教えてください。
デビッド
アップデート:
Firefoxが私にこれを言っていることに気づきました:
[14:08:46.456] ReferenceError: drawSmall is not defined @ ../wp-content/themes/twentytwelve/js/jquery-latest.min.js:297