獲取圖片實際渲染的寬度、高度與圖片原始的寬度和高度

　　在寫頁面時經常會遇到需要獲取圖片的寬度、高度等情況。然而以前總是獲取的是圖片實際渲染的寬度和高度，也就是你用css或js設置后的圖片的寬度和高度，並不是圖片原始的尺寸。今天突然遇到這個問題，一時之間不知如何做，查了下資料，自己摸索了一下。特此總結一下。

　　例如。有這樣一張圖片，代碼如下：　　

<img src="創建ajax的過程.png" alt="" >

　　1、獲取圖片渲染的寬度和高度(可用js或jQuery實現)。

　　（1）、使用js獲取圖片實際渲染的寬度、高度。

　　這里也有兩種方式:

　　一種是： document.getElementsByTagName("img")[0].width   // 獲取實際渲染寬度    document.getElementsByTagName("img")[0].height  // 獲取實際渲染高度

　　另一種： document.getElementsByTagName("img")[0].offsetWidth  // 獲取實際渲染寬度  document.getElementsByTagName("img")[0].offsetHeight // 獲取實際渲染高度

 

　　（2）、使用jQuery·獲取圖片實際渲染寬度和高度。

　　 $("img").width()  // 獲取實際渲染寬度  

　　 $("img").height()  // 獲取實際渲染高度

　　

　　然而當我們通過css或者js重新設置了圖片的寬度和高度后，再用上述方法並不能獲取圖片的原始尺寸，它獲取的是圖片實際渲染的寬度和高度，為了達到目的，我們需要使用下面這種方法。

　　2、獲取圖片原始的尺寸，也就是無論你是否用css、js設置過圖片的寬度、高度，始終獲取的是圖片的原始尺寸。

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

　　直接就是 document.getElementsByTagName("img")[0].naturalWidth   document.getElementsByTagName("img")[0].naturalHeight 

　　由於該屬性對於IE8及以下不支持，所以這里需要做一個兼容性處理。

　　html代碼：

<img src="完整的http請求過程.png" alt="" style="width:400px" id="img">

 

　　js代碼為：

　　<script>
        // 獲取圖片原始尺寸的兼容性寫法。
        window.onload = function(){
            function getNaturalSize (img) {
　　　　　　　　　if(window.naturalWidth && window.naturalHeight) {
                    naturalWidth = img.naturalWidth; 
                } else {   // 兼容IE8及以下版本
                    var image = new Image();
                    image.src = img.src;
                    var naturalWidth = image.width;
                }
                return naturalWidth;
            }
            var natural = document.getElementById('img');
            alert(getNaturalSize (natural));
        }
    </script>

　　注意IE6/7/8的處理，創建了一個新的img，僅設置其src，這時需要讓圖片完全載入后才可以獲取其寬高。