1

私は次のコードを持っています:

var canvasData;
var canvas2imgval;

imageObj1.onload = function() {
    ctx.drawImage(imageObj1, 0, 0, wdOb1, hgOb1);
    imageObj2.onload = function() {
        ctx.drawImage(imageObj2, imgposLeft, imgposTop, wdOb2, hgOb2);
        //img = c.toDataURL("image/png");
        //document.write('<img src="' + img + '" width="256" height="256"/>');
        //canvas2img
        canvasData = c.toDataURL("image/png");
    }

}
console.log("canvasData : "+canvasData ); 
$("#canvas2img").val(canvasData) ;
canvas2imgval = $("#canvas2img").val() ;
console.log("canvas2imgval1 : "+canvas2imgval );

問題は、両方の変数の値を表示すると、値があり、値canvasDataがundefinedありcanvas2imgval1ません。コードの何が問題なのかわかりません。通常、これら 2 つの変数は、JavaScript キーワードで public とマークされますvar。

4

1 に答える 1

1

画像イベント ハンドラーでこれらの変数に値を割り当てますが、onloadこれらのハンドラーが実行される前にそれらにアクセスしようとします。

これらの変数を使用するために、imageObj2.onload実行後に呼び出される関数を作成できます。また、グローバル変数を使用する代わりに、を引数として渡すことをお勧めしcanvasDataます (他の場所で使用されていない限り)。

var canvas2imgval;
var afterLoad = function(canvasData){
    console.log("canvasData : "+canvasData ); 
    $("#canvas2img").val(canvasData) ;
    canvas2imgval = $("#canvas2img").val() ;
    console.log("canvas2imgval1 : "+canvas2imgval); 
}    

imageObj1.onload = function() {
ctx.drawImage(imageObj1, 0, 0, wdOb1, hgOb1);
    imageObj2.onload = function() {
        ctx.drawImage(imageObj2, imgposLeft, imgposTop, wdOb2, hgOb2);
        //img = c.toDataURL("image/png");
        ////////document.write('<img src="' + img + '" width="256" height="256"/>');
        //canvas2img
        canvasData = c.toDataURL("image/png");
        afterLoad(canvasData);
    }

}
于 2013-07-24T10:03:45.540 に答える