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

使用该方法可以获取图片的原始尺寸，通常在图片放大缩小，动态生成图片处需要用到该方法！