Question

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

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

Javascript new Image（）没有加载图片

1 个答案: