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

On a page I have displayed 100 images, which have the width and height attribute changed. Image id is in a loop.

在页面上，我显示了100个图像，其中宽度和高度属性已更改。图像ID处于循环中。

How do I get the original image size, inside this loop?

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

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

5 个解决方案

#1

You can retrieve the original dimensions of an image by using the naturalWidth and naturalHeight properties of the dom object.

您可以使用dom对象的naturalWidth和naturalHeight属性检索图像的原始尺寸。

Eg.

例如。

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

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

With jQuery it would look like:

使用jQuery，它看起来像：

var image = $('#someImage');

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

#2

HTML:

HTML：

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

JavaScript:

JavaScript的：

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

Or just check it out here http://jsfiddle.net/Increazon/A5QJM/1/

或者只是在这里查看http://jsfiddle.net/Increazon/A5QJM/1/

#3

The only way to get the original size is to restore it to its original state. You can do this pretty easily by cloning the image, then removing the height and width attributes to get the real values. You also have to then insert the changed image into the page or else it wont have a calculated height/width. You can do this easily in an offscreen div. Here's an example:

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

http://jsbin.com/ocoto/edit

http://jsbin.com/ocoto/edit

The JS:

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

The CSS:

CSS：

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

The HTML:

HTML：

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

#4

I had to perform a similar task with a jQuery plugin I created. It keeps state for an inputs text value, but the principle could easily be used for your width and height.

我不得不用我创建的jQuery插件执行类似的任务。它保持输入文本值的状态，但原则可以很容易地用于您的宽度和高度。

I would create a custom object that stores the original object's ID, Width and Height. That object is then put into an array. When required to restore the value simply loop the array of custom objects to match ID and bingo, an object with the original width and height.

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

You can check out my plugin's code at www.wduffy.co.uk/jLabel to see how I implemented this. Depending on how many images you are changing the array could become a little on the heavy side though.

您可以在www.wduffy.co.uk/jLabel上查看我的插件代码，看看我是如何实现这一点的。根据您正在更改的图像数量，阵列可能会变得有点沉重。

An example might look like

一个例子可能看起来像

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;
};

#5

Try this one:

试试这个：

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

});

}）;