JavaScript取得圖片的原始尺寸以寬度為例_javascript技巧

頁裡的img元素，想要取得它的原始尺寸，以寬度為例可能首先想到的就是width，如下

複製程式碼 程式碼如下:

複製程式碼 程式碼如下:

<script> <BR>var img = document.getElementsByName('<script> <BR>var img = document.getElementsByName('<script> <BR>var img = document.getElementsByName'<script> , 'width') // 400 <BR></script>

很明顯，400不是圖片的原始寬度。

有一種方式可以獲取到，直接創建一個新img對象，然後把舊img的src賦值給新的，這時候獲取新img的寬度即可

複製程式碼 程式碼如下:

<script> <BR>function getNaturalWidth(img) { <> Imam. >var naturalWidth = image.width <BR>return naturalWidth <BR>} <BR>var img = document.getElementsByTagName('img')[0] <BR>getNaturalWidth(img) // 690 < <BR><BR> <BR>要注意的是，這裡新建立的image是不需要新增的DOM文件裡的。 <BR><BR>HTML5提供了一個新屬性naturalWidth/naturalHeight可以直接取得圖片的原始寬高。這兩個屬性在Firefox/Chrome/Safari/Opera及IE9裡已經實現。改造下取得圖片尺寸的方法。 </script>

複製程式碼

程式碼如下: function getImgNaturalDimensions(im,avaris> nWidth, nHeight if (img.naturalWidth) { // 現代瀏覽器

nWidth = img.naturalWidth

nHeight = img.naturalHeight
} else { // IE6/7/8
} else { // IE6/7/8
} var imgae = new Image()
image.src = img.src
image.onload = function() {
callback(image.width, image.height)
}
}
}
return [nWidth, nHeight]
}


注意IE6/7/8的處理，創建了一個新的img，僅設定其src，這時需要讓圖片完全載入後才可以獲得其寬高。因此這裡是異步的，可以傳一個回調，回調裡把原始的寬高當作參數傳入。