JavaScriptで画像をリサイズ(拡大/縮小)する方法です。

JavaScriptでリサイズするのでブラウザで処理できます。

処理の流れ

  • input type=”file”で任意の画像を選択
  • FileReader()でファイルを読み込み
  • Image()で画像として処理
  • canvasを使ってリサイズ
  • ブラウザに表示

JavaScriptでリサイズ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script type="text/javascript">
  const fileup = (e) => {
    const img = document.getElementById('img');
    const reader = new FileReader();
    const imgReader = new Image();
    const imgWidth = 400;
    reader.onloadend = () => {
      imgReader.onload = () => {
        const imgType = imgReader.src.substring(5, imgReader.src.indexOf(';'));
        const imgHeight = imgReader.height * (imgWidth / imgReader.width);
        const canvas = document.createElement('canvas');
        canvas.width = imgWidth;
        canvas.height = imgHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(imgReader,0,0,imgWidth,imgHeight);
        img.src = canvas.toDataURL(imgType);
      }
      imgReader.src = reader.result;
    }
    reader.readAsDataURL(e.files[0]);
  }
  </script>
</head>
<body>
  ファイル:<input type="file" accept="image/jpeg,image/png,image/gif" onchange="fileup(this)" />
  <div>
    <img src="" id="img" />
  </div>
</body>
</html>

これが今回のソースの全容です。

次の項目から各処理を抜粋して説明します。

画像を選択

ファイル:<input type="file" accept="image/jpeg,image/png,image/gif" onchange="fileup(this)" />

まずはinput type=”file”タグで画像を選択するフォームを作成。

acceptでjpeg,png,gifに限定しています。

onchangeでファイル選択後にイベントを発生させます。

FileReader()でファイルを読み込み

const reader = new FileReader();
~
reader.onloadend = () => {
~
}
reader.readAsDataURL(e.files[0]);

FileReader()でファイルを読み込みます。

onloadendでファイル読み込み後の処理を追加します。

Image()で画像として処理

const imgReader = new Image();
const imgWidth = 400;
~
imgReader.onload = () => {
  const imgType = imgReader.src.substring(5, imgReader.src.indexOf(';'));
  const imgHeight = imgReader.height * (imgWidth / imgReader.width);
~
}
imgReader.src = reader.result;

読み込んだファイルをImage()で画像として処理します。

読み込んだ画像から画像の種類(image/jpeg等)を判定します。

今回は画像の横幅を400pxに設定しています、縦幅は元画像のアスペクト比を維持するために横幅と同じ縮尺率になるように計算して求めています。

canvasでリサイズ

const canvas = document.createElement('canvas');
canvas.width = imgWidth;
canvas.height = imgHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(imgReader,0,0,imgWidth,imgHeight);

canvasエレメントを作成して、画像をリサイズします。

これで横幅400pxのリサイズされた画像がcanvasに描かれます。

ブラウザに表示

img.src = canvas.toDataURL(imgType);

canvas内の画像をimgタグに貼り付けます。

リサイズされた画像がブラウザに表示されます。

JavaScriptで画像リサイズ

元の画像サイズは800px:450pxです。

リサイズで400px:225pxに縮小されました。

アスペクト比は16:9で維持されています。