javascript - Chrome 无法从 JavaScript 创建的图像中获取宽度和高度

Question

我的 Web 应用程序有许多图像呈现功能，大多数时候我们需要调整它们的大小。我试图通过以下片段代码获取它的真实宽度和高度值：

var image = new Image();
image.src = IMAGE_URL;

var width = image.width;
var height = image.height;

上述代码在 Firefox 和 IE 10 等浏览器上运行没有问题，但在 Chrome 上返回 0。我猜 Chrome 不支持这个。

有人可以给我这方面的指导吗？

Answer 1

在图像加载并了解其构成后，您需要获取宽度和高度。

尝试：

var image = new Image();
image.onload = function() {
    var width = image.width;
    var height = image.height;
}
image.src = IMAGE_URL;

希望有帮助

Answer 2

尝试这个

img = new Image();
img.onload = function() {
    width = this.width;
    height = this.height;
};

Onload 帮助您获得宽度和高度。

Answer 3

您需要等待load事件，否则将无法知道图像的尺寸。

var image = new Image();

image.onload = function() {
    var width = image.width;
    var height = image.height;
    // These values will now be correct.
};

image.src = IMAGE_URL;