Wie erhalte ich mit JavaScript oder jQuery die natürlichen Abmessungen eines Bildes?

Question

Bisher habe ich diesen Code:

var img = document.getElementById('draggable');
var width = img.clientWidth;
var height = img.clientHeight;

Dadurch erhalte ich jedoch die HTML-Attribute – CSS-Stile. Ich möchte die Abmessungen der tatsächlichen Bildressource der Datei erhalten.

Ich brauche das, weil nach dem Hochladen des Bildes dessen Breite auf 0 Pixel eingestellt ist und ich nicht weiß, warum oder wo das passiert. Um dies zu verhindern, möchte ich die tatsächlichen Abmessungen abrufen und zurücksetzen. Ist es möglich?

EDIT: Selbst wenn ich versuche, die natürliche Breite zu ermitteln, ist das Ergebnis 0. Ich habe ein Bild hinzugefügt. Das Seltsame ist, dass dies nur passiert, wenn ich eine neue Datei hochlade, und nach einer Aktualisierung funktioniert es einwandfrei.

http://oi39.tinypic.com/3582xq9.jpg

Answer 1

有 img.naturalHeight 和 img.naturalWidth 为您提供图像本身的宽度和高度，而不是 DOM 元素。

Answer 2

您可以使用naturalWidth和naturalHeight，这些属性包含图像的实际的、未修改的宽度和高度，但您必须等到图像加载得到他们

var img = document.getElementById('draggable');

img.onload = function() {
    var width  = img.naturalWidth;
    var height = img.naturalHeight;
}

此功能仅支持IE9及以上版本，如果您必须支持旧版浏览器，您可以创建一个新图像，将其源设置为相同的图像，如果不修改图像的大小，它将返回图像的自然尺寸，因为当没有给出其他尺寸时，这将是默认尺寸

var img     = document.getElementById('draggable'),
    new_img = new Image();

new_img.onload = function() {
    var width  = this.width,
        heigth = this.height;
}

new_img.src = img.src;

FIDDLE