如何使用 javascript 或 jquery 获取图像的自然尺寸？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16342936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get natural dimensions of an image using javascript or jquery?
提问by user1848605
I have this code so far:
到目前为止我有这个代码：
var img = document.getElementById('draggable');
var width = img.clientWidth;
var height = img.clientHeight;
However this gets me the html attributes - css styles. I want to get dimensions of the actual image resource, of the file.
然而，这让我得到了 html 属性 - css 样式。我想获取文件的实际图像资源的尺寸。
I need this because upon uploading an image, it's width gets set to 0px and I have no idea why or where this is happening. To prevent it I want to get the actual dimension and reset them. Is this possible?
我需要这个，因为在上传图像时，它的宽度被设置为 0px，我不知道为什么或在哪里发生这种情况。为了防止它，我想获取实际尺寸并重置它们。这可能吗？
Edit: Even when I try to get naturalWidth I get 0 as a result. I've added a picture. The weird thing is that it only happens when I upload new files and upon refresh it's working as it should.
编辑：即使我尝试获得 naturalWidth ，我也会得到 0 结果。我添加了一张图片。奇怪的是，它只在我上传新文件时发生，并且在刷新时它会正常工作。
回答by adeneo
You could use naturalWidthand naturalHeight, these properties contain the actual, non-modified width and height of the image, but you have to wait until the image has loaded to get them
您可以使用naturalWidthand naturalHeight，这些属性包含图像的实际、未修改的宽度和高度，但您必须等到图像加载后才能获取它们
var img = document.getElementById('draggable');
img.onload = function() {
var width = img.naturalWidth;
var height = img.naturalHeight;
}
This is only supported from IE9 and up, if you have to support older browser you could create a new image, set it's source to the same image, and if you don't modify the size of the image, it will return the images natural size, as that would be the default when no other size is given
只支持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;
回答by mash
There are img.naturalHeightand img.naturalWidthwhich give you the width and height of the image itself, and not the DOM element.
有img.naturalHeight和img.naturalWidth为您提供图像本身的宽度和高度，而不是 DOM 元素。
回答by nathnolt
You can use the following function I made.
您可以使用我制作的以下功能。
Function
功能
function getImageDimentions(imageNode) {
var source = imageNode.src;
var imgClone = document.createElement("img");
imgClone.src = source;
return {width: imgClone.width, height: imgClone.height}
}
html:
html：
<img id="myimage" src="foo.png">
use it like this
像这样使用它
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
