使用jQuery获取图像的原始宽度和高度

Question

我需要根据给定的图片源获取图片的原始宽度和高度。我目前的方法是：

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 分别表示加载图片的原始宽度和高度的情况下，我想知道是否有更好的方法来处理这个问题。

- Joey

---

我正在做类似的事情，而且它对我来说运行得非常好。我正在开发一个查看器，可以以原始大小、适合宽度、适合所有等方式显示图像，因此了解原始大小很有帮助，而且我正在进行延迟加载图像。你目前的代码是否能够正常工作，只是想知道更好的方法吗？ - MrOBrian

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

这似乎是这个问题的重复 - 尽管这里接受的答案似乎是最好的。 - DRosenfeld

Answer 1

对于Chrome和Firefox浏览器（希望IE也能尽快支持），你可以使用...

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

- alex

---

you are hero :) - RajnishCoder

如何将您发布的代码中的这些值显示在图像旁边或图像本身的某个位置？ - undefined

Answer 2

跨浏览器:

jsFiddle演示

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

如果你想了解所有HTMLImageElement的属性，可以参考https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement。许多这些属性在现代的、符合HTML5标准的浏览器中已经可用，并且可以使用jQuery的.prop()方法进行访问。 jsFiddle演示

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 ... 
);

- Roko C. Buljan

---

我认为最好将图像附加到load()方法的末尾，否则在Firefox中无法获得正确的大小。 - Simon

@Simon 在 FF 中测试通过。正如您所看到的，无论您在哪里使用 appendTo（您也可以从上面的脚本中删除 .appendTo（），图像都会加载到该内存中的 HTML 图像元素中。因此，我不理解您的评论。 - Roko C. Buljan

如果在CSS中修改图像大小，则会出现问题。这里有一个演示问题（和解决方案）的fiddle：http://jsfiddle.net/tsjg7/1/ - Simon

这正是我的观点。如果你想要原始图像大小，在加载函数结束之前不要将其附加到dom上，否则如果css规则应用于图像，则会得到错误的大小。我认为这个小例子很好地说明了这一点。 - Simon

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

@JeffRyan 没错。水晶眼睛，好建议。已编辑 :) - Roko C. Buljan