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

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

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

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

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; 

Answer 2

HTML：

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/

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：

Answer 4

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

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

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

一个例子可能看起来像

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

Answer 5

试试这个：

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

}）;