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

據我所知，以調整在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中），但我發現，也沒有工作。

如何按比例調整圖像大小？

來源

2012-12-30 think123

獲取img.width和img.height，然後根據您調整的寬度計算比例高度。

For example：

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

來源

2012-12-30 01:31:37 robertc

代碼取自示例，如果您要編輯代碼，請提供一個新示例。 – robertc

在這個例子中，額外的300用於分離地顯示兩個畫布（不是一個在另一個之上），並且正在做一些額外的事情，而不僅僅是按比例調整圖像畫布的大小。如果該示例的鏈接不再有效，則此處提供的代碼可能會造成混淆。無論如何感謝您的答案。 – bleuscyther

我對這個話題去年去年寫了一篇博客文章。你可以閱讀它here。基本上它提供了一個用適當的高寬比縮放圖像的功能。它包括支持風景和肖像的方向和兩者之間的大小。您甚至可以選擇「信箱」和「平移和掃描（縮放）」模式。

它是用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並用「0」 result.targettop如果你不想爲中心的形象。

來源

2012-12-30 01:47:13 selbie

感謝您更新代碼。你錯過了一個地方（代碼下方） –

@Dogog - yep。再次修復 – selbie

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

回答

相關問題