在Javascript/jQuery中获取图像的完整尺寸

Question

我在网页上有一张图片，已经被缩放适应一个div容器，比如说400x300。如何在jQuery中获取这张图片的原始大小（约为4000x3000）？.width()和.height()只会返回当前图片的大小。

- emc

Answer 1

图片具有 naturalWidth 和 naturalHeight 属性，其中包含图像的实际、未修改的宽度和高度，即图像的真实尺寸，而不是 CSS 设置的尺寸。

不过，仍然需要等待图像加载。

$('#idOfMyimg').on('load', function() {
    var height = this.naturalHeight,
        width  = this.naturalWidth;
});

另一个选项是使用与源文件相同的文件创建新图像，并从中获取尺寸，只要它从未添加到DOM，外部样式就不会影响它。

var img = new Image();

img.onload = function() {
   var height = this.height,
       width  = this.width;
}
img.src = $('#idOfMyimg').attr('src');

FIDDLE

- adeneo

---

快速而完美的解决方案，不会牺牲性能:D - Erick

Answer 2

你可以克隆这张图片，删除高度和宽度属性，将其附加到body并在移除之前获取其宽度和大小。

jsFiddle演示在这里：http://jsfiddle.net/58dA2/ 代码如下：

$(function() {
   var img = $('#kitteh'); // image selector
   var hiddenImg = img.clone().css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('body');
    $('#height').text(hiddenImg.height());
    $('#width').text(hiddenImg.width());
    hiddenImg.remove();            
});​

- GregL

---

必须要有猫猫图片，赞一个！ - emc

@npc 谢谢！我甚至不是“猫奴”，但入乡随俗嘛... :-) - GregL

• 为另一种不同的解决方案 :)

- fider

不错的解决方案。此外，我将样式属性宽度和高度设置为自动： img.clone().css({ visibility: 'hidden', width: 'auto', height: 'auto' }) - Markus Madeja

Answer 3

您可以使用一个包含相同源文件的Image对象来实现此功能，例如：

var preloader = new Image();
preloader.src = 'path/to/my/file.jpg';

preloader.onload = function(){
var height = preloader.height;
var width = preloader.width;
}

- m90

Answer 4

试试这个：

var pic = $("img")

// 如果图片元素设置了宽度和高度，则需要将其移除 pic.removeAttr("width"); pic.removeAttr("height");

var pic_real_width = pic.width(); var pic_real_height = pic.height();

- Java

---

我已经编辑了我的答案，现在它应该可以工作了，请检查您的[jsfiddle.net/kCN2x]链接。 - Java