js获取图片信息（二）-----js获取img的height、width宽高值为0

 

首先，创建一个图片对象：

 

var oImg= new Image();
oImg.src = "apple.jpg";

 

然后我们打印一下图片的信息：

console.log(oImg);
console.log(oImg.src);
console.log(oImg.height);
console.log(oImg.naturalHeight);
console.log(oImg.width);
console.log(oImg.naturalWidth);

在某些电脑上的谷歌浏览器和IE11浏览器上，以上代码工作正常。但是在某些电脑上会报出和火狐在第一次打开时却报出宽高值均为0。如果按F5刷新页面，又能正确获取宽高值了。按 Ctrl+F5 强制刷新（忽略缓存）的话，仍能复现这个问题。

这是因为火狐对于JS异步运行非常快。当载入image.src = "apple.jpg";时，火狐已经开始运行 var height = image.height;了。而且这与DOM无关，完全是javascript和浏览器的问题。

如果你的图片不是通过是 js 创建的，在页面本来就存在的，也会出现这种情况的。我个人就是这种情况，然后查出问题的。

使用 oImg.onload 可以避免这个问题。

oImg.onload = function () {
    console.log(oImg);
    console.log(oImg.src);
    console.log(oImg.height);
    console.log(oImg.naturalHeight);
    console.log(oImg.width);
    console.log(oImg.naturalWidth);
}

所以当你需要获取图片信息时，最好是用 oImg.onload 来保证结果的正确。

综合考虑，如不考虑浏览器兼容性问题，获取图片原始尺寸可以使用HTML5 新属性 naturalWidth/naturalHeight；如要兼容的话，直接使用 .width,.height 就可以了。

 

 

参考：javascript使用image.height和image.width获取图片宽高值为0，获取失败