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;
    }

使用该方法能够获取图片的原始尺寸，一般在图片放大缩小，动态生成图片处须要用到该方法！