javascript - 如何按比例调整 Canvas 中的图像大小？

Question

据我所知，要在 HTML5 canvas 中调整加载图像的大小，可以这样做:

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