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

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

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

然而，这让我获得了html属性–css样式。 我想获得文件的实际图像资源的维度。

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

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

http://sofzh.miximages.com/javascript/3582xq9.jpg

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; 

小提琴

Answer 2

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

Answer 3

您可以使用我制作的以下function。

function

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

HTML：

像这样使用它

 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