在jQuery中获取图像的原始宽度和高度

Posted 2023-05-07

【中文标题】在jQuery中获取图像的原始宽度和高度

【英文标题】：Getting an image's original width and height in jQuery

【发布时间】：2012-07-15 19:58:24

【问题描述】：

我需要获取给定特定来源的图像的原始宽度和高度。我目前的方法是：

img.tag = "<img style='display:none;' src='" + img.src + "' />";
img.Owidth = 0;
img.Oheight = 0;

$(img.tag).load(function() 
    img.Owidth = $(this).width();
    img.Oheight = $(this).height();
).appendTo(img.parent());

Owidth 和 Oheight 是加载图像的原始尺寸。我想知道是否有更好的方法来做到这一点：

图像可能已经加载，但显示的尺寸与其原始尺寸不同。 图像尚未加载

【问题讨论】：

我正在做一些非常相似的事情，它对我来说效果很好。我正在开发一个可以以原始尺寸、适合宽度、适合所有尺寸等显示图像的查看器，因此了解原始尺寸会很有帮助，而且我懒加载图像。您当前的代码是否适合您，而您只是想知道更好的方法？

这段代码对我来说运行良好，MrOBrian，是的，我只是想看看是否有更有效的方法来完成这个。

这似乎是this question 的两倍——尽管这里接受的答案似乎是所有答案中最好的。

【参考方案1】：

跨浏览器：

jsFiddle demo

$("<img/>").load(function()
    var width  = this.width,
        height = this.height; 
    alert( 'W='+ width +' H='+ height);
).attr("src", "image.jpg");

---

htmlImageElement 属性/HTML5 兼容浏览器

如果您想调查所有 HTMLImageElement 属性：https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement 许多这些属性已经在现代的 HTML5 兼容浏览器中可用，并且可以使用 jQuery 的.prop() metod

访问

jsFiddle demo

var $img = $("#myImage");

console.log(
    $img.prop("naturalWidth") +'\n'+  // Width  (Natural)
    $img.prop("naturalHeight") +'\n'+ // Height (Natural)
    $img.prop("width") +'\n'+         // Width  (Rendered)
    $img.prop("height") +'\n'+        // Height (Rendered)
    $img.prop("x") +'\n'+             // X offset
    $img.prop("y")                    // Y offset ... 
);

【讨论】：

我认为最好在 load() 方法的末尾将图像附加到 DOM 中。否则我得不到正确的尺寸（在 Firefox 中测试）。

@Simon 在 FF 作品中进行了测试。如您所见，无论您在何处使用 appendTo（您也可以从上面的脚本中删除 .appendTo(），图像都会加载到内存中的 HTML 图像元素中。所以我没有得到你的评论。

在CSS中修改图片大小会出现问题。这是一个说明问题（和解决方案）的小提琴：jsfiddle.net/tsjg7/1

这正是我的观点。如果您想要原始图像大小，请不要在加载功能结束之前将其附加到 dom，否则如果将 css 规则应用于图像，您将获得错误的大小。我认为小提琴很好地说明了这一点。

这很好，但有一个建议，负载定义应该在设置 src 之前。您正在创建一个竞争条件，其中可能会在定义加载函数之前加载图像。

【参考方案2】：

对于 Chrome 和 Firefox（希望很快 IE），您可以使用...

var width = $('img').prop('naturalWidth');
var height = $('img').prop('naturalHeight');

【讨论】：

你是英雄 :)