调整大小后，获取实际图像大小

Get actual image size, after resizing it

本文关键字：图像 调整 获取      更新时间：2023-09-26

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

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

我试过了：

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

和：

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

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

你有"自然"的kws来帮助你：

使用 JS：

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

或使用 jquery

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

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

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 上的图像，因为 DOM 上的图像已修改尺寸。据我所知，缓存的图像将使用此方法回收。因此，无需担心额外的HTTP请求。

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

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

  1. 如果在加载映像之前调用，naturalHeight可能会返回0或undefined。仅设置src属性可能并不意味着立即加载图像。我已经看到最好在onload中获取它.

    $('selector')[0].onload = function() {
  alert(this.naturalHeight);
  alert(this.naturalWidth);
}

  2. 如果不使用this，只是$('selector').naturalHeight可能不起作用。您可能需要访问关联的 DOM 元素，即 $('selector')[0].naturalHeight 或 $('selector').get(0).naturalHeight，因为我们使用的是本机 Javascript 的属性naturalHeight 。有关更多详细信息，请参阅此SO帖子。

相关文章：