如何使用JavaScript或jQuery获取图像的原始尺寸？

Question

到目前为止，我有这段代码：

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

然而，这个方法可以让我获得HTML属性- CSS样式。我想获取文件实际图片资源的尺寸。

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

编辑：即使我尝试获取naturalWidth，结果也是0。我已经添加了一张图片。奇怪的是，只有当我上传新文件时才会出现这种情况，在刷新后它就像应该的那样工作。

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

- user1848605

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;

FIDDLE

- adeneo

---

这样解决了，谢谢。将我的代码包装在jQuery.ready()函数中不够吗？因为那时候图片还没有加载好？只有在上传新文件到服务器时才会出现这个问题。 - user1848605

当jQuery DOM准备函数触发时，图片不会被加载，只有DOM准备好了。$(window).on('load')将在所有内容都加载完成后触发，但是直接将onload事件处理程序附加到图片会更好，这是我的个人意见。 - adeneo

这非常有帮助。 - bdalina

Answer 2

有img.naturalHeight和img.naturalWidth两个属性，它们可以提供图片本身的高度和宽度，而非DOM元素。

- mash

---

据我所知，在IE8及以下版本中无法使用，而且在Opera浏览器中也不行。 - adeneo

有趣。请注意，这是针对IE9或更高版本的。我查了一下，偶然发现了这个代码片段，它将.naturalHeight()和.naturalWidth()添加到jQuery中。只是想在这里分享这个信息：http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/ - Terry Young

Answer 3

你可以使用我制作的以下函数。

函数

function getImageDimentions(imageNode) {
  var source = imageNode.src;
  var imgClone = document.createElement("img");
  imgClone.src = source;
  return {width: imgClone.width, height: imgClone.height}
}

html:

<img id="myimage" src="foo.png">

使用方法如下

var image = document.getElementById("myimage"); // get the image element
var dimentions = getImageDimentions(image); // get the dimentions
alert("width: " + dimentions.width + ", height: " + dimentions.height); // give the user a visible alert of the dimentions

- nathnolt

---

这似乎是对< IE8的解决方案，如最佳答案所述，所以+1，尽管我不喜欢这种额外处理会影响正常浏览器用户。但是，也许您可以检测自然宽度是否存在，如果不存在，则运行此代码。 - George