JS - 获取图片的原始尺寸
当我们通过 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); });