如何使用 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

原文由 user1848605 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 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;

小提琴

原文由 adeneo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

有 img.naturalHeight 和 img.naturalWidth 给你图像本身的宽度和高度，而不是DOM元素。

原文由 mash 发布，翻译遵循 CC BY-SA 3.0 许可协议