[解決済み] 画像をキャンバスにフィットするように拡大縮小する

質問

ユーザーが画像をアップロードするためのフォームがあります。

画像が読み込まれたら、サーバーに渡す前にファイルサイズを小さくするために、画像に対して何らかのスケーリングを行っています。

これを行うには、画像をキャンバス上に配置し、そこで操作します。

このコードでは、サイズ320 x 240pxのキャンバスで、拡大縮小された画像をレンダリングします。

ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

... ここで、canvas.width と canvas.height は、画像の高さと幅に、元画像のサイズに基づくスケーリング係数を掛けたものです。

しかし、このコードを使おうとすると

ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height

... キャンバスに画像の一部（この場合、左上隅）しか表示されません。実際の画像サイズが 320x240 のキャンバス サイズより大きいにもかかわらず、キャンバスに収まるように画像全体を「拡大縮小」する必要があります。

したがって、上記のコードでは、幅と高さが 1142x856 であり、これが最終的な画像サイズとなります。フォームが送信されたときにサーバーに渡すためにこのサイズを維持する必要がありますが、ユーザーにはキャンバスに表示されるように小さく表示したいだけです。

私はここで何を見逃しているのでしょうか？どなたか正しい方向を示していただけませんか？

ありがとうございました。

どのように解決するのですか？

最初の矩形として、ソース画像（img）のサイズを指定します。

ctx.drawImage(img, 0, 0, img.width,    img.height,     // source rectangle
                   0, 0, canvas.width, canvas.height); // destination rectangle

2番目の矩形は、出力サイズ（ソース矩形がどのように拡大縮小されるか）になります。

2016/6アップデート : 縦横比と位置決め（CSS の "cover" メソッドに準ずる）については、こちらをご覧ください。

シミュレーションの背景サイズ: キャンバスでカバー