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

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

---

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

获取

img.width

和

img.height

，然后根据要调整大小的宽度计算比例高度

:

---

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

它是在考虑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”。

代码取自示例，如果要编辑代码，请提供一个新示例。在示例中，额外的300用于分别显示两个画布（而不是一个在另一个之上）除了按比例调整图像画布的大小之外，它还做了一些额外的事情。如果示例的链接不再起作用，那么这里提供的代码可能会令人困惑。不管怎样，谢谢你的回答。那我给画布做动画的时候呢？！谢谢你更新代码。你错过了一个位置（代码下方）@HDog-yes。再次修复

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