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

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 ，然后根据您要调整的宽度计算比例高度。

例如 ：

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

Answer 2

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

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

页面底部附近是“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”。