如何使用 JavaScript 或 jQuery 获取图像的自然尺寸？

Question

到目前为止我有这个代码：

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

然而，这让我获得了 html 属性 - css 样式。我想获取文件的实际图像资源的尺寸。

我需要这个，因为上传图像后，它的宽度被设置为 0px，我不知道为什么或在哪里发生这种情况。为了防止这种情况，我想获取实际尺寸并重置它们。这可能吗？

编辑：即使当我尝试获取naturalWidth时，结果也是0。我添加了一张图片。奇怪的是，只有当我上传新文件时才会发生这种情况，并且刷新后它会正常工作。

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