Javascript new Image()没有加载图像

Javascript new Image() not loading image

本文关键字：加载 图像 new Image Javascript      更新时间：2023-09-26

我通过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);

为什么会发生这种情况，因为我相信我已经做了正确的一切?

我不知道createImage做了什么，但我想它只是创建了一个新的实例，像这样:

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

问题是，图像只能绘制到画布元素，如果它已经加载，所以你必须提供一个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);
});
相关文章：