Question

我有...

var img = new Image();
img.src = 'img.png';

function Class(img){
   this.img = img;
   console.log(this.img.width); //0
}

var instance = new Class(img);

以上代码中的控制台日志无论图像大小如何都返回0。

如果我将控制台日志放入更新功能，并让它生成每一帧，它的确会返回正确的值

Element.prototype.update = function(){
   console.log(this.img.width); //581
}

但是我不希望它返回每一帧的宽度。我只想在施工过程中一次。知道为什么img.width / height总是在构造函数内返回0吗？

Answer 1

因为图像资源的加载始终是异步的。您需要等待其onload事件：

var img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png';

function Class(img){
   this.img = img;
   img.onload = e => {
     console.log(this.img.width);
   };
}

var instance = new Class(img);

构造函数中的img.width / height返回零

1 个答案: