Question

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中一样），但我发现它也不起作用。

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

Answer 1

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

For example：

ctx.drawImage(img, 300, 0, 300, img.height * (300/img.width));

Answer 2

去年我写了一篇关于这个主题的博客文章。你可以阅读它here。基本上它提供了用适当的宽高比缩放图像的功能。它包括支持横向和纵向方向以及两者之间的尺寸。您甚至可以选择＆＃34; letterbox＆＃34;和＃34;平移和扫描（缩放）＆＃34;模式。

它是以div定位的方式编写的，但可以很容易理解画布。

靠近页面底部的是＆＃34; ScaleImage＆＃34;功能。那可能就是你想要的。然后您可以按如下方式应用它：

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';

你可以用＆＃34; 0＆＃34;替换result.targetleft和result.targettop。如果你不想让图像居中。

如何在画布中按比例调整图像大小？

2 个答案: