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，獲取失敗