CSSやJSで画像リサイズ

フロント側で画像リサイズ方法を紹介します、取得した画像が大きすぎるため小さくして表示したい、送信したい場面に役立つかと思います。

画像をリサイズして表示する

表示するだけであれば、わざわざ容量を落とす必要もないためCSSで調整可能です。
新たなCSSプロパティであるobject-fitでのリサイズがオススメです。

デモ

See the Pen Untitled by miyakezaka (@miyakezaka) on CodePen.

object-fit: cover;でアスペクト比を維持したまま横幅と高さを自動で調節してくれます。

CSS

img {
  object-fit: cover;
  width: 100px;  //任意の数値
  height: 100px; //任意の数値
}

値によってリサイズの種類を設定できます。
MDN object-fit
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

IE対応

IEに対応する場合はポリフィルを読み込む必要があります。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>
<script>
　objectFitImages();
</script>

CSS

img {
	object-fit: cover;
	font-family: 'object-fit: cover;'; /*IE対策*/
}

画像本体をリサイズして送信する

送信する際は、見栄えだけではなく本体の容量を落とすケースが考えられます。
Canvasを使用してbase64形式でリサイズが可能です。

デモ

https://secret-black-moji-5876.ssl-lolipop.jp/article/image-resize/
ディベロッパーツールで画像を確認すると画像がリサイズされているのがわかるかと思います。
※デモの画像だと元画像の大きさと大差がないので、base64のため容量は上がっています。

JS

window.addEventListener('load', function(){
  const elemiImg = document.getElementById("img");
  // canvas要素を生成
  const cvs1 = document.createElement('canvas');
  const ctx1 = cvs1.getContext('2d');
  cvs1.width = elemiImg.width;
  cvs1.height = elemiImg.height;
  ctx1.drawImage(elemiImg, 0, 0);
  //　Base64を作成
  const base64_1 = cvs1.toDataURL("image/png");

  // 最大幅、最大高さを設定
  const maxWidth = 200, 
        maxHeight = 200;
  // Imageのインスタンス生成
  const img1 = new Image();
  // Imageインスタンスにbase64格納
  img1.src = base64_1;
  // img1.srcを読み込まれてから安全に実行
  img1.onload = function() {
    // 読み込み画像のアスペクト比調整
    let width, height;
    if(img1.width > img1.height){
      const ratio = img1.height/img1.width;
      width = maxWidth;
      height = maxWidth * ratio;
    } else {
      const ratio = img1.width/img1.height;
      width = maxHeight * ratio;
      height = maxHeight;
    };
    // canvasタグを生成
    const cvs2 = document.createElement('canvas');
    cvs2.width  = width;
    cvs2.height = height;
    
    // コンテキスト(canvasの描画に必要なもの、2Dグラフィックを描画するためのメソッド)を取得
    const ctx2 = cvs2.getContext('2d');

    // canvasに計算したアスペクト比で画像を描画する
    ctx2.drawImage(img1,
      0, 0, img1.width, img1.height,
      0, 0, width, height
    );
    // Canvasでリサイズしたbase64を取得
    const base64_2 = cvs2.toDataURL(img1);

    // 挿入用の画像を生成 〜 出力
    const img2 = new Image();
    img2.src = base64_2;
    const elemAfter = document.getElementById('after');
    elemAfter.appendChild(img2);
  };
});

送信する際はFileAPIで読み込むケースが多いかと思いますが、また別の機会に載せたいと思います。

最後までご覧戴き、ありがとうございました。