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,获取失败

原文 js获取图片信息(二)-----js获取img的height、width宽高值为0

posted @ 2019-05-24 10:56  xiaoshen666  阅读(2248)  评论(0编辑  收藏  举报