如何獲取圖片的原始尺寸大小？

　　如下，當給 img 設置一個固定的大小時，要怎樣獲取圖片的原始尺寸呢？

#oImg{
    width: 100px;
    height: 100px;
}

<img src="images/test.jpg" id="oImg" alt="">

HTML5提供了一個新屬性 naturalWidth / naturalHeight 可以直接獲取圖片的原始寬高。這兩個屬性在Firefox/Chrome/Safari/Opera及IE9裏已經實現。

 w = document.getElementByTagName("img").naturalWidth;
 h 
 
= document.getElementsByTagName("img").naturalHeight;
    
console.log(w + ‘  ‘ + h);

打印出來的結果與原始尺寸相符。但有個前提是，必須在圖片完全下載到客戶端瀏覽器才能判斷。

如果是不支持的版本瀏覽器，那可以用傳統方法判斷，如下：

   var oImg = document.getElementById("oImg"),
        w,h;

    if (oImg.naturalWidth) {
        // HTML5 browsers
        w = oImg.naturalWidth;
        h 
 
= oImg.naturalHeight;
    }
    else {
        // IE 6/7/8
        var nImg = new Image();
        nImg.src = oImg.src;
        nImg.onload = function () {
            w = nImg.width;
            h = nImg.height;

            console.log(w + "  " + h)
        }
    }

此時為什麽要加 onload 的原因是，圖片可能沒加載完成，導致圖片的 width 、height 無法獲取到。

還有下面一種情況：圖片外面有個盒子，且盒子display:none；

.imgbox{
        width: 100px;
        height: 100px;
        display: none;
}

<div class="imgbox">
    <img src="images/test.jpg" id="oImg" alt="">
</div>

嫌創建 new Image（） 麻煩，就想到另外一種方法。

var oImg = document.getElementById("oImg"),
        w,h;

    if (oImg.naturalWidth) {
        // HTML5 browsers
        w = oImg.naturalWidth;
        h = oImg.naturalHeight;
    }
    else {
        // IE 6/7/8
        w = oImg.width;
        h = oImg.height;
    }

console.log(w + "  " + h)

但這種方法，在ie8 下是獲取不到 img width / height 的。此時，我們要對 imgbox 做下處理。

.imgbox{
　　width: 0;
　　overflow: hidden;
}

現在就可以兼容 ie8 了。

js獲取圖片原始尺寸