js獲取圖片信息（一）-----獲取圖片的原始尺寸

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

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

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

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

方法一：

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

 w = document.getElementsByTagName("img")[0].naturalWidth;
 h = document.getElementsByTagName("img")[0].naturalHeight;
    
console.log(w + '  ' + h);

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

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

var img = 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)
　　}
　　nImg.src = oImg.src;
}

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

這里還有有個點要注意， nImg.src = oImg.src 這段代碼為什么要放在 nImg.onload 函數后面？ 這樣做是為了兼容 ie 。ie 除了第一次加載圖片時候獲取正常，之后再刷新就沒有反應了。其他大部分瀏覽器獲取正常。這是什么原因呢？

原因也挺簡單的，就是因為瀏覽器的緩存了。當圖片加載過一次以后，如果再有對該圖片的請求時，由於瀏覽器已經緩存住這張圖片了，不會再發起一次新的請求，而是直接從緩存中加載過來。對於大部分瀏覽器，它們視圖使這兩種加載方式對用戶透明，同樣會引起圖片的onload事件，而 ie 則忽略了這種同一性，不會引起圖片的onload事件。。。一般情況下，可以用 complete 來判斷圖片是否加載完畢。對於 complete 屬性來講，IE是根據圖片是否顯示過來判斷，就是說當加載的圖片顯示出來后，complete 屬性的值才為true ，否則一直是false ，和以前是否加載過該張圖片沒有關系，即和緩存沒有關系！可以寫如下的函數來做到各個瀏覽器中預加載圖片的兼容性。如下：

var img = 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;
　　if(nImg.complete) { // 圖片已經存在於瀏覽器緩存
　　　　console.log(nImg.width + "  " + nImg.height);
　　}else{
　　　　nImg.onload = function () {
　　　　　　w = nImg.width;
　　　　　　h = nImg.height;
　　　　　　console.log(w + "  " + h);
　　　　}
　　}
}

 

最后封裝成函數，如下：

function getImgNaturalDimensions(oImg, callback) {
　　var nWidth, nHeight;
　　if (!oImg.naturalWidth) { // 現代瀏覽器

　　　　nWidth = oImg.naturalWidth;
　　　　nHeight = oImg.naturalHeight;
　　　　callback({w: nWidth, h:nHeight});

　　} else { // IE6/7/8
　　　　var nImg = new Image();

        nImg.onload = function() {
             var nWidth = nImg.width,
                 nHeight = nImg.height;
           callback({w: nWidth, h:nHeight});
　　　　}
　　　　nImg.src = oImg.src;
　　}
}

var img = document.getElementById("oImg");
getImgNaturalDimensions(img, function(dimensions){
　　console.log(dimensions.w);
});

 

方法二：（圖片不需要再頁面中展示）

將 img 放在頁面中不可見的位置上，缺點是：這種方法需要瀏覽器加載這張圖片

.imgbox{// img 盒子
　　width: 0;
　　overflow: hidden;
}

然后在去取圖片寬高等信息：

function getImgNaturalDimensions2(oImg) {
　　var nWidth, nHeight;
　　if (!oImg.naturalWidth) { // 現代瀏覽器
　　nWidth = oImg.naturalWidth;
　　nHeight = oImg.naturalHeight;
　　return ({w: nWidth, h:nHeight});
} else { // IE6/7/8
　　　　nWidth = oImg.width;
　　　　nHeight = oImg.height;
　　　　return ({w: nWidth, h:nHeight});
　　}
}

var getImg = getImgNaturalDimensions2(img);
console.log(getImg)

 

然而，到這里，是不是萬事大吉了呢？答案當然是否定的。

你用這種方法做后，會發現你有時可以取得 img 的 width、height ，但有時會是個 0。原因見下節分析。

我們先看如何正常去取吧！

var img = document.getElementById("oImg");


img.onload = function(){
    //方法一
    getImgNaturalDimensions(img, function(dimensions){
        console.log(dimensions.w);
    });

    //方法二
    var getImg = getImgNaturalDimensions2(img);
    console.log(getImg);
}

只需在 img.onload 函數內去調用函數。

原因見下節分析：js獲取圖片信息（二）-----js獲取img的height、width寬高值為0