9

AFAIK，要在 HTML5 画布中调整加载图像的大小，可以这样完成：

var img = new Image();
img.onload = function () {
  ctx.drawImage(img, 0, 0, 300, 200); // resizes image to 300px wide, 200px high
}
img.src = 'images/myimage.jpg';

但后来我意识到图像不会按比例正确。所以我尝试只使用一个参数（就像在 HTML 中一样），但我发现它也不起作用。

如何按比例调整图像大小？

4

2 回答 2

17

获取img.widthand img.height，然后根据您要调整的宽度计算比例高度。

例如：

ctx.drawImage(img, 300, 0, 300, img.height * (300/img.width));
于 2012-12-30T01:31:37.207 回答
11

去年我写了一篇关于这个主题的博客文章。你可以在这里阅读。基本上，它提供了一种以适当的纵横比缩放图像的功能。它包括支持横向和纵向方向以及两者之间的大小。您甚至可以在“信箱”和“平移和扫描（缩放）”模式之间进行选择。

它是在考虑 div 定位的情况下编写的，但对于 canvas 来说很容易理解。

靠近页面底部的是“ScaleImage”功能。这可能就是你想要的。然后你可以按如下方式应用它：

var img = new Image();
img.onload = function () {

  var result = ScaleImage(img.width, img.height, 300, 200, true);

  ctx.drawImage(img, result.targetleft, result.targettop, result.width, result.height); // resizes image to a target size of 300x200 using letterbox mode
}
img.src = 'images/myimage.jpg';

如果您不希望图像居中，您可以将 result.targetleft 和 result.targettop 替换为“0”。

于 2012-12-30T01:47:13.977 回答