如何使用 jQuery 获取实际的图像宽度和高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2395931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get actual image width and height using jQuery?
提问by X10nD
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);
回答by g.salakirov
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;
回答by Vova Popov
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/
回答by Erik
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 中轻松完成此操作。下面是一个例子：
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>
回答by WDuffy
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/jLabelto 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;
};
回答by Ryan Ba?aria
Try this one:
试试这个：
$("<img>")
.attr("src", element.attr("src"))
.load(function(){
MG.originalSize[0] = this.width;
MG.originalSize[1] = this.height;
});
});
