Javascript 是否在image onload（）事件处理程序中多次创建画布？

在下面的脚本中，我尝试调整上传图像的大小，并返回调整大小文件的文件大小

$（函数（）{
$（“#文件_选择”）。更改（函数（e）{
var fileReader=newfilereader（）；
fileReader.onload=函数（e）{
var img=新图像（）；
img.onload=函数（）{
var MAX_WIDTH=100；
var最大高度=100；
变量宽度=img.width；
var高度=img高度；
如果（宽度>高度）{
如果（宽度>最大宽度）{
高度*=最大宽度/宽度；
宽度=最大宽度；
}
}否则{
如果（高度>最大高度）{
宽度*=最大高度/高度；
高度=最大高度；
}
}
console.log（“循环”）；
var canvas=document.createElement（“canvas”）；
//canvas.setAttribute（'id'，'canvas'）
画布宽度=宽度；
canvas.height=高度；
canvas.getContext（“2d”）.drawImage（这个，0，0，宽度，高度）；
////添加了行
var canvasData=canvas.toDataURL（）；
////行编辑
this.src=画布数据；
////添加了行
log（canvasData.length*3/4，'bytes'）；
document.body.appendChild（this）；//如果不想显示，请将其删除
}
img.src=e.target.result；
}
fileReader.readAsDataURL（e.target.files[0]）；
});
});

上传图片
上传你的照片。。。
创建一个变量以跟踪
onload范围之外的画布


let canvas；
$（函数（）{
$（“#文件_选择”）。更改（函数（e）{
var fileReader=newfilereader（）；
fileReader.onload=函数（e）{
var img=新图像（）；
img.onload=函数（）{
var MAX_WIDTH=100；
var最大高度=100；
变量宽度=img.width；
var高度=img高度；
如果（宽度>高度）{
如果（宽度>最大宽度）{
高度*=最大宽度/宽度；
宽度=最大宽度；
}
}否则{
如果（高度>最大高度）{
宽度*=最大高度/高度；
高度=最大高度；
}
}
console.log（“循环”）；
如果（画布）返回；
canvas=document.createElement（“canvas”）；
//canvas.setAttribute（'id'，'canvas'）
画布宽度=宽度；
canvas.height=高度；
canvas.getContext（“2d”）.drawImage（这个，0，0，宽度，高度）；
////添加了行
var canvasData=canvas.toDataURL（）；
////行编辑
this.src=画布数据；
////添加了行
log（canvasData.length*3/4，'bytes'）；
document.body.appendChild（this）；//如果不想显示，请将其删除
}
img.src=e.target.result；
}
fileReader.readAsDataURL（e.target.files[0]）；
});
});

上传图片
上传你的照片。。。
我已经测试了它的工作原理，我不知道这一点，非常感谢您的帮助。很好，澄清一下，当您最初设置src时，会首先调用您的
img.onload
，但是，当加载图像并使用数据url设置新图像src时，会再次调用
onload
侦听器，解释循环。