调整大小后获取实际图像大小答案

【问题标题】：Get actual image size, after resizing it调整大小后获取实际图像大小
【发布时间】：2020-03-09 18:19:23
【问题描述】：

我有一个充满缩略图的页面，用 css 将大小调整为 150x150，当我单击缩略图时，页面变暗，并且图像以其真实大小显示。

目前，我必须手动创建一个包含所有图像实际高度的数组。为了解决我的画廊的设计问题+更少的手动操作，我需要在调整图像大小（CSS）后获取图像的实际高度。

我试过了：

var imageheight = document.getElementById(imageid).height;

还有：

var imageheight = $('#' + imageid).height();

但两者都返回由 CSS 分配的 150px 属性。我该如何解决这个问题？谢谢

【问题讨论】：

stackoverflow.com/questions/7682772/…的可能重复
所以您正在加载所有全尺寸图像而不是制作正确的缩略图？哎哟...
我正在加载完整尺寸的图像，并在单击缩略图时显示它。

标签： javascript jquery css

【解决方案1】：

你有“自然”的知识来帮助你：

用js：

var imageheight = document.getElementById(imageid).naturalHeight;

或使用 jquery

var imageheight = $('#' + imageid).naturalHeight;

【讨论】：

对于 IE9+ 和任何其他主流浏览器，这些属性都是有效的。这是一个很好的答案！有人可能为此包装了一个 jQuery 插件。如果没有，这可能会很有趣。

【解决方案2】：

一种方法是创建一个单独的图像对象。

function getImageDimensions(path,callback){
    var img = new Image();
    img.onload = function(){
        callback({
            width : img.width,
            height : img.height
        });
    }
    img.src = path;
}

getImageDimensions('image_src',function(data){
    var img = data;

    //img.width
    //img.height

});

这样，您将使用相同的图像，但不是 DOM 上的图像，它已修改尺寸。据我所知，缓存的图像将使用这种方法回收。所以不用担心额外的 HTTP 请求。

【讨论】：

【解决方案3】：

@Dinesh 仅使用 naturalHeight 和 naturalWidth 属性的答案很棒，可能应该是公认的答案。

我只是想在这里添加两件可以节省人们时间的东西，因为我看到了很多关于这个问题的 SO 帖子，并且我自己花了很多时间在这上面。

如果在加载图像之前调用naturalHeight，则可能返回0 或undefined。仅仅设置src 属性可能并不意味着图像会立即加载。我已经看到最好在onload获取它。
```
$('selector')[0].onload = function() {
  alert(this.naturalHeight);
  alert(this.naturalWidth);
}
```
如果不使用this，仅$('selector').naturalHeight 可能不起作用。您可能需要访问相关的 DOM 元素，即 $('selector')[0].naturalHeight 或 $('selector').get(0).naturalHeight，因为我们使用的是原生 Javascript 的属性 naturalHeight。有关详细信息，请参阅this SO post。

【讨论】：

我花了好几个小时想知道为什么naturalWidth 会返回undefined，现在我知道为什么了 (+1)。