获取缩放图像的原始大小

Question

如果我的图片标签是这样的：<img src="picture.png" style="max-width:100px">，那么如何使用javascript获取原始未缩放的图片大小呢？

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

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

Source

- Bugster

---

@bugster 我们如何实现在网站上获取缩放图像的原始大小？如果无法访问该网站，又该如何获取原始图像呢？请考虑原始图像URL是公共链接。 - Datacrawler

Answer 1

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

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

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

i2.src = i.src;

这里有一个Fiddle示例：http://jsfiddle.net/baZ4Y/

- Matt Greer

---

这也是我做的方式，但是创建一个包含图像数据的新对象，并依赖于浏览器的内部缓存机制来避免拖慢速度，对我来说似乎有些浪费。肯定有更好的方法。 - Andri

Pekka指出这个问题之前已经有答案了，而且那个问题的解决方法也是如此。可能这只是浏览器/JS没有很好处理的一个小边缘情况。 - Matt Greer

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和正则表达式检索图像的比例。

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

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

- Jonathan Cox

---

如果图像是通过<img>标签中的参数进行缩放，则此方法无效。图像具有.naturalWidth和.naturalHeight属性，可让您直接获取原始尺寸。 - Bugster

我明白了。对于我的用例，我需要获取的不是图像的原始尺寸，而是在缩放之前在页面上呈现的图像大小。由于我正在调整不同原始尺寸的图像以适应div，因此.naturalWidth和.naturalHeight属性对我无效，但是这种方法有效。如果有人遇到与我相同的问题，您介意我保留这个答案吗？还是我应该把它删除？ - Jonathan Cox