JavaScript 获取图像真正的宽度和高度

Question

CSS 帮助设计师设置一个元素的最大宽度 max-width 和最大高度 max-height ，防止布局错位，我总是把 img、iframe 和 embed 标签设置成 max-width: 100% 这样在小屏幕的设备上依然可以浏览，不过我还是希望能够获取到图像没有被拉伸和缩小的原始尺寸。

thumb.addEventListener('onload', function() {
    console.log('My width is: ', this.naturalWidth);
    console.log('My height is: ', this.naturalHeight);
});

上面的代码中使用了 naturalWidth 和 naturalHeight，这是 HTML5 新增的属性，它们可以直接获取图片的原始宽高。而且这在 Fixefox/Chrome/Safari/Opera/IE9 里已经实现。

页面中的 IMG 元素想要获取图片的原始尺寸通常使用 innerWidth 属性或者使用 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;
}

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