⛏️

画像のリサイズをJavaScriptで行う

2 min read

画像をバックエンドに送る前にリサイズしたい時があると思います。
サーバー側でリサイズ処理を行うのは、それだけでもアップロード時のネットワークの負荷などもあって
あまりよろしくないことがあります。

なので、フロント側、つまりJavaScriptでリサイズしましょうという考え。

流れ

  1. 画像読み込む
  2. canvasを作成
  3. 好きな大きさを指定
  4. 画像をcanvasに貼り付ける(位置や、canvas内の画像の大きさなども指定する)
  5. DataURL(文字列化)にする

このような流れになりますが、流れを見るより処理を見た方が分かりやすいかと思います。

リサイズ処理

画像読み込み

画像の読み込みを行います。

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", roadImg, false);

function roadImg(e) {
  const file = this.files[0]
  let reader = new FileReader();
  reader.onload = () => {
    const imgData = reader.result;
    const resizedImgData = resizeImg(imgData);
    const image = document.getElementById('img');
    image.src = resizedImgData;
  };
  reader.readAsDataURL(file)
}

resizeImg関数を作る

上記の画像の読み込み時に実行しているresizeImg関数を作り、その関数内でcanvasを作成します。

function resizeImg(imgData) {
  const canvas = document.createElement('canvas');
  canvas.width = 150;
  canvas.height = 150;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imageData, 0, 0, 150, 150);
  return canvas.toDataURL('image/png')
}

canvasを作成

二行目のところでcanvasを作成します。
canvasは、描画するためのctx(context)を取得する必要があります。
五行目でcontextを作成しています。

https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D

好きな大きさを指定

三行目、四行目のところで、canvasのwidthとheightで大きさを指定しています。
ここでは150という固定値にしています。

画像をcanvasに貼り付ける

canvasのcontextにdrawImage関数があるのでそちらで画像を描画します。
drawImageの引数は以下を参考にしてください。
左上0の位置から縦横150の大きさで描画しています。

https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Using_images#slicing

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

DataURLにする

最後の行でcanvasをData(文字列)にしてreturnしています。
引数には画像のタイプを指定します。

https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/toDataURL

最終的にリサイズした画像の大きさのbase64の画像を取得でき、プレビューに表示する事ができる感じになります。

画像のリサイズはできるだけフロント側でやれれば良いなと思うので
このリサイズはできるととても有効だと思います。

参考

https://www.bokukoko.info/entry/2016/03/28/JavaScript_で画像をリサイズする方法

https://teratail.com/questions/56884

https://blog.panicblanket.com/archives/4504

http://singletonton.blogspot.com/2020/06/base64.html

https://qiita.com/nobu17/items/64f51d43827424db4b6a

Discussion

ログインするとコメントできます