JS - 获取图片的原始尺寸

2019-02-21 发布：hangge 阅读：2750

当我们通过 style 样式给 img 设置一个固定的大小时，图片就会按照这个大小来显示。同时设置后，使用 img 的 width 和 height 属性得到的也是我们设置的宽高，而不是图片原始尺寸。

如果想要获取图片的原始尺寸，根据浏览器的不同，有两种方法。

1，对于支持 H5 的浏览器

在 HTML 5 中，新增加了两个用来获取图片原始宽高的属性，分别为 naturalWidth 和 naturalHeight 属性。

注意：必须在图片完全下载到客户端浏览器后才能判断。这两个属性目前在 IE9、Firefox、Chrome、Safari 和 Opera 都是可以使用的。

var img = document.getElementById('myImage');
console.log("显示尺寸：", img.width, img.height);
console.log("实际尺寸：", img.naturalWidth, img.naturalHeight);

2，对于不支持 H5 的浏览器

对于像是 IE6、IE7、IE8 这样不支持 H5 的浏览器，我们可以使用传统的方法判断。

var img = document.getElementById('myImage');
console.log("显示尺寸：", img.width, img.height);

var temImg = new Image();
temImg.onload = function() {
  console.log("实际尺寸：", temImg.width, temImg.height);
}
temImg.src = img.src;

附：封装一个通用函数

（1）为方便使用我们可以封装一个通用方法，这样可以兼容所有浏览器，也方便使用。

function getImgNaturalDimension(img, callback) {
  if (typeof img.naturalWidth == "undefined") { // IE6/7/8
    var temImg = new Image();
    temImg.onload = function() {
      callback({width: temImg.width, height:temImg.height});
    }
    temImg.src = img.src;
  } else { // 现代浏览器
    callback({width: img.naturalWidth, height:img.naturalHeight});
  }
}

（2）使用样例

var img = document.getElementById('myImage');
console.log("显示尺寸：", img.width, img.height);

getImgNaturalDimension(img,function(dimension){
　　console.log("实际尺寸：", dimension.width, dimension.height);
});