如何使用 javascript 或 jquery 获取图像的自然尺寸？答案

【问题标题】：How do I get natural dimensions of an image using javascript or jquery?如何使用 javascript 或 jquery 获取图像的自然尺寸？
【发布时间】：2013-04-26 21:56:21
【问题描述】：

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

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

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

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

编辑：即使我尝试获得 naturalWidth 我也得到 0 结果。我添加了一张图片。奇怪的是，它仅在我上传新文件并刷新时才会发生。

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

【问题讨论】：

看this解决方案

标签： javascript jquery image dimensions

【解决方案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

【讨论】：

这样就解决了，谢谢。将我的代码包装在 jQuery.ready() 函数中还不够，因为那时还没有加载图像？我只有在将新文件上传到服务器时才会遇到这个问题。
当 jQuery DOM 就绪函数触发时，图像不会被加载，只有 DOM 就绪。 $(window).on('load') 将在所有内容加载后触发，但直接将 onload 事件处理程序附加到图像会更好 IMO。
这很有帮助

【解决方案2】：

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

【讨论】：

在 IE8 或更低版本中不起作用，据我所知，在 Opera 中不起作用。
有趣。请注意，对于 IE，这是针对 IE9 或更高版本的。我查了一下，偶然发现了这个将.naturalHeight() 和.naturalWidth() 添加到jQuery 的sn-p。只是想我可以在这里分享这个信息：jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie

【解决方案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

【讨论】：

这看起来像是顶级答案中描述的