Html 我们可以通过画布得到真实的图像大小吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9129028/
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
Can we get the real image size through the canvas?
提问by LittleFunny
In image tag, if we don't supply width and height property, we will get nothing when retrieving the width and the height of the image. I am using the canvas element to load an image and scale it proportionally. In order to do this, I have to get the actual image size. Is it possible to do that in html 5?
在图像标签中，如果我们不提供宽度和高度属性，那么在检索图像的宽度和高度时将一无所获。我正在使用画布元素加载图像并按比例缩放。为了做到这一点，我必须获得实际的图像大小。是否可以在 html 5 中做到这一点？
回答by Simon Sarris
The HTMLImageElementhas two properties for this, naturalWidthand naturalHeight. Use those.
该HTMLImageElement有此两个属性，naturalWidth和naturalHeight。使用那些。
As in:
如：
var img = new Image();
img.addEventListener('load', function() {
// once the image is loaded:
var width = img.naturalWidth; // this will be 300
var height = img.naturalHeight; // this will be 400
someContext.drawImage(img, 0, 0, width, height);
}, false);
img.src = 'http://placekitten.com/300/400'; // grab a 300x400 image from placekitten
It is wise to set source only after the event listener is defined, see Phrogz's exploration on that here: Should setting an image src to data URL be available immediately?
仅在定义事件侦听器后才设置源是明智的，请参阅 Phrogz 对此的探索：是否应立即将图像 src 设置为数据 URL？
回答by rezoner
You cannot retrieve width/height before image has been loaded.
您无法在加载图像之前检索宽度/高度。
Try something like:
尝试类似：
// create new Image or get it right from DOM,
// var img = document.getElementById("myImage");
var img = new Image();
img.onload = function() {
// this.width contains image width
// this.height contains image height
}
img.src = "image.png";
Anyhow onload will not fire if image has been loaded before script execution. Eventually you can embed script in html <img src="test.jpg" onload="something()">
无论如何，如果在脚本执行之前加载了图像，则 onload 不会触发。最终你可以在 html 中嵌入脚本<img src="test.jpg" onload="something()">
回答by tnt-rox
if I understand you correctly, you can use the getComputedStylemethod.
如果我理解正确，您可以使用该getComputedStyle方法。
var object = document.getElementById(el);
var computedHeight = document.defaultView.getComputedStyle(object, "").getPropertyValue("width");
回答by abhinav pratap
Not fully understood your question.
没有完全理解你的问题。
But you can use javascript to get the width and height of the image.
但是您可以使用 javascript 来获取图像的宽度和高度。
and then pass it into
然后将其传入
/ Five arguments: the element, destination (x,y) coordinates, and destination
// width and height (if you want to resize the source image).
context.drawImage(img_elem, dx, dy, dw, dh);
while drawing image on canvas.
在画布上绘制图像时。
or check this if it helps
或者检查这个是否有帮助
