HTML5でフォーム送信前に画像をリサイズする方法｜drawImage()メソッドの使い方

drawImage()メソッドで画像をスケーリングする

フォームの送信前に画像のサイズを変更したい場合は、Canvas APIのdrawImage()メソッドを使用します。このメソッドは、元画像を指定した倍率で拡大・縮小し、その結果をキャンバス上の任意の座標に描画できます。

以下のコードでは、元画像をスケールしたうえで、キャンバスの原点[0, 0]を基準に描画しています。

context.drawImage(img, 0, 0, img.width, img.height, 0, 0, myWidth, myHeight);

引数の意味は順に「描画元の画像」「元画像の切り出し領域(x, y, 幅, 高さ)」「描画先の領域(x, y, 幅, 高さ)」です。元画像全体を対象に、新しいサイズでキャンバスへ描き出していることになります。

表示サイズの計算方法

拡大率に基づく幅と高さの算出

var myWidth = Math.floor(img.width * Scale);
var myHeight = Math.floor(img.height * Scale);

Scaleには拡大率を指定します。たとえば0.5を指定すると、元の半分のサイズになります。Math.floor()で小数点以下を切り捨てることで、ピクセル単位の整数値に丸めています。

キャンバス中央への配置

var x = Math.floor((world.width - myWidth) / 2);
var y = Math.floor((world.height - myHeight) / 2);

world.widthおよびworld.heightはキャンバス全体のサイズです。「キャンバスのサイズ − 描画サイズ」の差分を2で割れば、左右（上下）の余白の半分が求められます。これを描画開始位置のオフセットとして使えば、画像をキャンバスの中央に配置できます。

リサイズ後の画像をフォームで送信する

drawImage()でキャンバスに描画した画像は、toDataURL()メソッドによりJPEGやPNG形式のデータURLとして取得できます。これを非表示のinput要素（hidden）に格納すれば、通常のフォーム送信と一緒にサーバーへ渡すことが可能です。

// 選択されたファイルを読み込み、リサイズしてhiddenフィールドに格納する例
document.getElementById('file').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function(ev) {
    const img = new Image();
    img.onload = function() {
      const scale = 0.5; // 元の半分のサイズに縮小
      const w = Math.floor(img.width * scale);
      const h = Math.floor(img.height * scale);
      const canvas = document.getElementById('canvas');
      canvas.width = w;
      canvas.height = h;
      const context = canvas.getContext('2d');
      context.drawImage(img, 0, 0, img.width, img.height, 0, 0, w, h);
      // リサイズ後の画像データをhiddenフィールドへ設定
      document.getElementById('resizedImage').value = canvas.toDataURL('image/jpeg', 0.8);
    };
    img.src = ev.target.result;
  };
  reader.readAsDataURL(file);
});

この手法を使えば、大きな画像でもクライアント側であらかじめ縮小してからアップロードできるため、通信量の削減やサーバー側の負荷軽減につながります。特にスマートフォンで撮影した高解像度の写真を投稿するフォームなどで有効なテクニックです。