9

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の場合と同様に）1つのパラメーターのみを使用してみましたが、どちらも機能しないことがわかりました。

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

4

2 に答える 2

17

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

例：

ctx.drawImage(img, 300, 0, 300, img.height * (300/img.width));
于 2012-12-30T01:31:37.207 に答える
11

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

divの配置を念頭に置いて書かれていますが、canvasでは簡単に理解できます。

ページの下部近くに「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」に置き換えることができます。

于 2012-12-30T01:47:13.977 に答える