Question

如果我的图片如下所示，如何从javascript获取原始的，未缩放的图片大小：<img src="picture.png" style="max-width:100px">？

我找到了答案，您可以使用img.naturalWidth来获取原始宽度

var img = document.getElementsByTagName("img")[0];
img.onload=function(){
    console.log("Width",img.naturalWidth);
    console.log("Height",img.naturalHeight);
}

Source

Answer 1

一种方法是创建另一个图像元素，将其src设置为原始的src，然后读取其宽度。这应该是便宜的，因为浏览器应该已经缓存了图像。

var i = document.getElementById('myimg');

var i2 = new Image();
i2.onload = function() {
   alert(i2.width);
};

i2.src = i.src;

这是一个小提琴：http://jsfiddle.net/baZ4Y/

Answer 2

编辑：如果要在图像上呈现图像之后，但在使用比例缩放图像之前检索图像的计算尺寸，则此方法很有用。如果您只想要图像的原始大小，请使用上述方法。

尝试缩放图像时，请尝试将图像比例写入数据属性。然后，您可以通过该缩放属性轻松划分新尺寸以检索原始尺寸。它可能看起来像这样：

// Set the scale data attribute of the image
var scale = 2;
img.dataset.scale = scale;

...

// Later, retrieve the scale and calculate the original size of the image
var s = img.dataset.scale;
var dimensions = [img.width(), img.height()];
var originalDimensions = dimensions.map(function(d) {return d / parseFloat(s)});

或者，您可以直接使用jQuery和regex检索图像的比例。

var r = /matrix\(([\d.]+),/;
try {
  var currentTransform = $swiper.css('transform');
  var currentScale = currentTransform.match(r)[1];
}
// Handle cases where the transform attribute is unset
catch (TypeError) {
  currentScale = 1;
}

这对我来说比创建一个全新的图像更具直观意义，并依赖于浏览器的缓存来快速加载。

获取缩放图像的原始大小

2 个答案: