イメージをキャンバスに比例してサイズ変更するには？ HTML5のキャンバスにロードされたイメージのサイズを変更する

Question

私の知る限りでは、このように行われることになります。

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

しかし、その後、私はイメージが比例正確ではないことに気づきました。だから私は1つのパラメータだけを使用してみました（ちょうどHTMLのように）が、私はどちらもうまくいきませんでした。

イメージのサイズを比例的に変更するにはどうすればよいですか？

Answer 1

img.widthとimg.heightを取得し、サイズを変更する幅に応じて比例高を計算します。

For example：

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

Answer 2

私は最後に、昨年、このトピックに関するブログ記事を書きました。あなたはそれを読むことができますhere。基本的には、適切な縦横比で画像を拡大縮小する機能を提供します。これには、風景と肖像の両方の向きとその2つの間のサイズをサポートすることが含まれます。 「レターボックス」と「パンとスキャン（ズーム）」モードを選択することもできます。

divの位置付けを念頭に置いて書かれていましたが、キャンバスで簡単に理解できました。

ページの下部には、「ScaleImage」機能があります。それはあなたが望むものかもしれません。次のようにあなたはそれを適用することができます：あなたが中心のイメージをしたくない場合は、result.targetleftを交換し、「0」とresult.targettopでき

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

。