獲取img圖片原始尺寸程式碼例項

所謂的原始圖片尺寸是不經過css樣式定義或者img標籤的width和height屬性定義的尺寸。

而是最為放在那裡本來表現出來的尺寸，下面分享一段能夠相容所有瀏覽器的例項程式碼，需要的可以做一下參考。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
function getImgNaturalDimensions(img, callback) {
  var nWidth, nHeight;
  if (img.naturalWidth) { // 現代瀏覽器
    nWidth = img.naturalWidth;
    nHeight = img.naturalHeight;
    callback(nWidth, nHeight)
  } 
  else { // IE6/7/8
    var imgae = new Image()
    image.onload = function() {
      callback(image.width, image.height)
    }
    image.src = img.src
  }
}

上面的程式碼片段能夠實現我們的要求，下面對程式碼進行一下分析。

一.程式碼註釋:

（1）.getImgNaturalDimensions(img, callback),第一個引數是img物件，第二個引數是一個回撥函式，也就是獲取尺寸後要乾的事情。

（2）.var nWidth, nHeight，宣告兩個變數，用來儲存圖片的原始尺寸。

（3）.if (img.naturalWidth),判斷當前瀏覽器是否支援naturalWidth，此屬性是HTML5新增的,IE9以下瀏覽器不支援。此屬效能夠獲取圖片的原始尺寸。

（4）.nWidth = img.naturalWidth,將原始寬度賦值給變數。

（5）.nHeight = img.naturalHeight，將原始高度賦值給變數。

（6）.callback(nWidth, nHeight),呼叫回撥函式，做一些我們想做的事情。

（7）.else {},如果是IE9以下瀏覽器。

（8）.var imgae = new Image()，宣告一個圖片物件。

（9）.image.onload = function() {

  callback(image.width, image.height)

}，為圖片物件註冊onload事件處理函式，也就是圖片載入完畢觸發。

（10）.image.src = img.src，進行圖片地址賦值。從註釋8到這裡，其實也可以防止IE9以下瀏覽器由於快取不能觸發onload事件的現象，這裡不多介紹，具體可以參閱相關閱讀。