Javascript 获取缩放图像的原始大小

如果我的图像是这样的：

，如何从javascript中获得图像的原始、未缩放的大小

我找到了答案，您可以使用

img.naturalWidth

获得原始宽度

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

---

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

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

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

i2.src = i.src;

这里有一个小把戏：

编辑：如果要在页面上渲染图像后，但在使用缩放变换图像大小之前检索图像的计算大小，则此方法非常有用。如果您只需要图像的原始大小，请使用上述方法

在缩放图像时，尝试将图像的比例写入数据属性。然后，您可以轻松地将新标注除以该比例属性以检索原始尺寸。它可能看起来像这样：

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

---

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

我也是这样做的，但是创建一个包含图像数据的新对象，并依靠浏览器的内部缓存机制来避免陷入困境对我来说似乎是浪费。必须有更好的方法。佩卡指出，这一点以前已经得到了回答，这也是该问题的解决方法。可能这只是浏览器/JS没有很好的机制来处理的一个小问题。@bugster我们如何实现这一点，以获得网站中缩放图像的原始大小？如果无法访问该网站，那么如何拍摄原始图像呢？考虑到原始图像URL是一个公共链接。如果在“代码> <代码>标签中的参数缩放图像，这将不起作用。图像有一个

.naturalWidth

和

.naturalHeight

属性，可以让您直接获得原始尺寸。我明白了。对于我的用例，我需要得到的不是图像的原始尺寸，而是缩放之前在页面上呈现的图像的大小。由于我使用不同的原始大小调整图像大小以适合一个div，因此

.naturalWidth

和

.naturalHeight

属性对我不起作用，但这种方法确实起作用。你介意我把这个答案留着，以防有人带着和我一样的问题来这里，还是我应该把它记下来？