如何在畫布中按比例調整圖像大小？

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”。