如何使用jQuery获取实际图像宽度和高度？

Question

我在一个页面上展示了100张图片，它们的宽度和高度属性被改变了。 图像ID在循环中。

如何在此循环内获取原始图像大小？

$(this).appendTo(".prod_image").attr('height',150).attr('width',150).attr('title','').attr('name','').attr('alt','').attr('id','id'+i);

- X10nD

---

只是一个小提示，您可以使用以下代码：attr({ height:150, width:150, title: '', name: '', 'id': 'id'+i);等等。 - Ionuț Staicu

可能是重复的问题：有没有办法使用jQuery读取图像的“naturalWidth”？ - Darvanen

Answer 1

您可以使用DOM对象的naturalWidth和naturalHeight属性获取图像的原始尺寸。

例如：

var image = document.getElementById('someImage');

var originalWidth = image.naturalWidth; 
var originalHeight = image.naturalHeight;

使用jQuery的话，代码如下：

var image = $('#someImage');

var originalWidth = image[0].naturalWidth; 
var originalHeight = image[0].naturalHeight;

- g.salakirov

---

+1，强调一下这在IE 8及以下版本中不受支持（因此需要为旧版浏览器提供其他备选方案）。 - Andy E

这是似乎可以工作的语法：image.prop("naturalWidth") （在此相关问题中看到）。 - DRosenfeld

Answer 2

HTML：

  <img id="myimg" src="http://azart-cash.ru/big_pics/kazino_AzartPlay.png"
  width="120" height="140"/>

JavaScript：

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = $("#myimg").attr('src');

或者你可以在这里查看 http://jsfiddle.net/Increazon/A5QJM/1/

- Vova Popov

---

这绝对是最简单和最优雅的解决方案。那些需要将元素渲染到屏幕外并使用自定义CSS的高票选项更慢且更丑陋。 - EMI

我认为这很丑，不够优雅。如果你的目标是IE8+，naturalWidth是一个好的解决方案。 - Inanc Gumus

Answer 3

唯一获取原始大小的方法是将其恢复到原始状态。您可以通过克隆图像，然后删除高度和宽度属性以获取实际值来轻松完成此操作。您还必须将更改后的图像插入页面，否则它将没有计算出的高度/宽度。您可以在屏幕外div中轻松完成此操作。以下是一个示例：

http://jsbin.com/ocoto/edit

JS：

// Copy the image, and insert it in an offscreen DIV
aimgcopy = $('#myimg').clone();
$('#store').append(aimgcopy);

// Remove the height and width attributes
aimgcopy.removeAttr('height');
aimgcopy.removeAttr('width');

// Now the image copy has its "original" height and width
alert('Height: '+aimgcopy.height()+' Width: '+aimgcopy.width());

CSS：

  #store {  position: absolute;  left: -5000px; }

这是HTML代码：

  <img id="myimg" src="http://sstatic.net/so/img/logo.png" width="300" height="120"/>
  <div id="store"></div>

- Erik

Answer 4

我曾经使用自己创建的jQuery插件执行类似的任务。它为输入文本值保留状态，但是这个原则可以很容易地用于您的宽度和高度。

我会创建一个自定义对象来存储原始对象的ID、宽度和高度。然后将该对象放入数组中。当需要恢复值时，只需循环自定义对象数组以匹配ID，就能找到具有原始宽度和高度的对象。

您可以查看我的插件代码www.wduffy.co.uk/jLabel，了解我如何实现这一点。根据您要更改的图像数量，数组可能会变得有些沉重。

例如：

var states = new Array();

function state($obj) {

    // Public Method: equals
    this.equals = function($obj) {
        return $obj.attr('id') == this.id;
    };

    // Public Properties
    this.id = $obj.attr('id');
    this.width = $obj.attr('width');
    this.height = $obj.attr('height');

};

function getState($obj) {
    var state; 

    $.each(states, function() {
        if (this.equals($obj)) {
            state = this;
            return false; // Stop the jQuery loop running
        };
    });

    return state;
};

- William

Answer 5

试试这个：

$("<img>")
            .attr("src", element.attr("src"))
            .load(function(){
                MG.originalSize[0] = this.width;
                MG.originalSize[1] = this.height;

});

- Ryan Bañaria