Javascript new Image() 不加载图像

Question

我正在通过 javascript 加载 url 创建一个新图像，但是当将其加载到屏幕上时却没有，通过进一步调查我发现加载图像后图像没有设置高度和宽度。这是我用来创建和绘制图像的代码。

var img = createImage("./Images/saveButton.png");
context.drawImage(img, 50, 50);
var oldback = context.getImageData(0, 0, 64, 64);
context.drawImage(img, 50, 50);
var imgData = context.getImageData(0, 0, 64, 64);

为什么会发生这种情况，因为我相信我已经正确完成了所有操作？

Answer 1

我不知道 createImage 做了什么，但我想它只是创建一个新实例，如下所示:

var createImage = function (url) {
    var img = new Image();
    img.src = url;
    return img;
}

问题是图像只能在已加载的情况下绘制到 Canvas 元素，因此您必须提供 onload 回调:

var createImage = function (url, callback) {
    var img = new Image();
    callback();
    img.src = url;
    return img;
};

createImage("./Images/saveButton.png", function () {
    context.drawImage(img, 50, 50);
    var oldback = context.getImageData(0, 0, 64, 64);
    context.drawImage(img, 50, 50);
    var imgData = context.getImageData(0, 0, 64, 64);
});