在画布中，有没有一种方法可以判断img.src何时完成加载

Question

在将图像添加到画布后，我正在尝试将画布转换为dataURL。我遇到的问题是在将图像加载到画布上之前创建dataURL。有没有一种方法可以判断图像何时加载完成？

var myCanvas = document.getElementById('canvas');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src = URL;

document.getElementById("imgURL").value = myCanvas.toDataURL();

Answer 1

您已经在使用img.onload处理程序，该处理程序在图像加载完成后运行。由于ctx.drawImage是同步，因此保证在执行下一行代码之前，图像会在画布上渲染。

因此，您应该做的只是在onload回调中运行myCanvas.toDataURL()，在drawImage之后，您将获得包含图像的画布的Base64，如下所示：

img.onload = function(){
ctx.drawImage(img,0,0);
document.getElementById("imgURL").value = myCanvas.toDataURL();
}