javascript - 为什么这些变量为"undefined"?

  显示原文与译文双语对照的内容
0 0

我有下面的代码:

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 ); 

问题是当我查看两个变量的值时,canvasDataundefinedcanvas2imgval1 没有值。 我不知道我的代码有什么问题。 通常这两个变量都用JavaScript关键字 var 标记为 public 。

时间:原作者:6个回答

0 0

在图像 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);
 }
}
原作者:
...