html5中新屬性naturalWidth/naturalHeight的用法

簡介

naturalWidth和naturalHeight是html5新增的屬性，它們能夠直接獲取圖片的原始寬高。並且這在Fixefox/Chrome/Safari/Opera/IE9裏已經實現。

看看naturalWidth和naturalHeight在各大瀏覽器中兼容性以下：

圖片截取自：http://caniuse.com/#search=na...

緣由

頁面中的img元素想要獲取圖片的原始尺寸一般使用innerWidths屬性或者使用jQuery的width()方法，
可是若是給圖片添加了width樣式，那麼用innerWidth或width()得到寬度是否是你想要的，由於innerWidth或width()獲取的是元素盒模型的實際渲染的寬度，而不是圖片的原始寬度。

結果

能夠使用naturalWidth和naturalHeight去獲取圖片的原始尺寸，考慮的兼容問題，能夠採用new Image()去得到圖片的原始尺寸：
代碼以下：

function  getNaturalSize(img){
        var naturalSize ={};
        if(window.naturalWidth && window.naturalHeight){
            naturalSize.width = img.width;
                naturalSize.height = img.height;
        }else{
            var image = new Image();
            image.src = img.src;
            naturalSize.width = image.width;
            naturalSize.height = image.height;
        }
        return naturalSize;
    }

使用該方法能夠獲取圖片的原始尺寸，一般在圖片放大縮小，動態生成圖片處須要用到該方法！