Question

在图片标签中，如果我们不提供width和height属性，则在检索图像的宽度和高度时，我们什么也得不到。我使用canvas元素加载图像并按比例缩放。为了做到这一点，我必须得到实际的图像大小。是否可以在html 5中执行此操作？

Answer 1

HTMLImageElement有两个属性，naturalWidth和naturalHeight。使用那些。

如：

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

在定义事件监听器之后设置源是明智的，请参阅Phrogz对此的探索：Should setting an image src to data URL be available immediately?

Answer 2

在加载图像之前无法检索宽度/高度。

尝试类似：

// 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";

如果在脚本执行之前加载了图像，无论如何都不会触发onload。最后，您可以在html <img src="test.jpg" onload="something()">

中嵌入脚本

Answer 3

如果我理解正确，您可以使用getComputedStyle方法。

var object = document.getElementById(el);
var computedHeight = document.defaultView.getComputedStyle(object, "").getPropertyValue("width");

Answer 4

不完全明白你的问题。

但您可以使用javascript来获取图片的宽度和高度。

然后将其传递给

 / 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);

在画布上绘制图像时。

或检查这是否有帮助

http://jsfiddle.net/jjUHs/

我们可以通过画布获得真实的图像大小吗？

4 个答案: