⛏️
画像のリサイズをJavaScriptで行う
画像をバックエンドに送る前にリサイズしたい時があると思います。
サーバー側でリサイズ処理を行うのは、それだけでもアップロード時のネットワークの負荷などもあって
あまりよろしくないことがあります。
なので、フロント側、つまりJavaScriptでリサイズしましょうという考え。
流れ
- 画像読み込む
- canvasを作成
- 好きな大きさを指定
- 画像をcanvasに貼り付ける(位置や、canvas内の画像の大きさなども指定する)
- 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を作成しています。
好きな大きさを指定
三行目、四行目のところで、canvasのwidthとheightで大きさを指定しています。
ここでは150という固定値にしています。
画像をcanvasに貼り付ける
canvasのcontextにdrawImage関数があるのでそちらで画像を描画します。
drawImageの引数は以下を参考にしてください。
左上０の位置から縦横150の大きさで描画しています。
DataURLにする
最後の行でcanvasをData（文字列）にしてreturnしています。
引数には画像のタイプを指定します。
最終的にリサイズした画像の大きさのbase64の画像を取得でき、プレビューに表示する事ができる感じになります。
画像のリサイズはできるだけフロント側でやれれば良いなと思うので
このリサイズはできるととても有効だと思います。
参考
Discussion