JavaScriptで画像ファイルをリサイズしたい時があると思います。僕はありました。
単にFileを投入して変換するコードが意外となかったのでここに共有します。
この例では、リサイズ後の画像をブラウザからダウンロードの形で取得できるようにしました。

DEMO

See the Pen GRJRrPW by hiroism (@jukaism) on CodePen.

Canvasを利用します

Canvasは図を表示するための仕様ですが、機能が豊富なので画像加工にも利用できます。

  <body>
    <canvas style="width: 484px; height: 253px;" id="canvas"></canvas>
  </body>

画像をリサイズしたい幅と高さを指定しておきます。邪魔ならdisplay: none;も可。

コード全体

htmlファイルにしてブラウザで開けば動くコードです。
スクリプト内の**resize(file)**にFileを投入するほか、
添付フィールドを用意したので、ここから画像を選んでも動作します。

<html lang="ja">
  <body>
    <input type="file" id="image_zone">
    <br>
    <canvas style="width: 484px; height: 253px;" id="canvas"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <!-- IEで必要。不要なら削除を -->
    <script>
      // image_zoneに新しいファイルがセットされた時、resizeを呼ぶ
      const imageZone = document.getElementById('image_zone')
      imageZone.addEventListener('change', resizePinnedImage, false)
      function resizePinnedImage(e) {
          const file = e.target.files[0]
          if (!file.type.match('image.*')) { return }
          resize(file)
      }
      // Canvasに画像をリサイズして貼り、終わったらブラウザからダウンロードっぽく取得
      function resize(file) {
        imageToCanvas(file).then(function (canvas) {
          // [5] キャンバスから画像を取得
          if (canvas.msToBlob) {
            window.navigator.msSaveBlob(canvas.msToBlob(), 'resized.png')
          } else {
            const a = document.createElement('a')
            a.href = canvas.toDataURL(file.type)
            a.download = 'resized.' + file.type.split('/')[1]
            a.click()
          }
        }).catch(function (error) {
          console.error(error)
        })
      }

      function imageToCanvas (imageFile) {
        // [1] Fileから画像データを得る
        return new Promise(function (resolve, reject) {
          readImage(imageFile).then(function (src) {
            loadImage(src).then(function (image) {
              // [2] Canvasの呼び出し
              const canvas = document.getElementById("canvas")
              const ctx = canvas.getContext('2d')
              // [3] 縮尺を計算
              const scale = Math.max((canvas.height / image.height), (canvas.width / image.width))
              // [4] 画像を切り取り、Canvasに展開して返す
              ctx.drawImage(
                // Canvasに貼り付ける画像
                image, 
                // 画像の切り取り開始位置（左上からの横距離、縦距離）
                (image.width - (canvas.width / scale)) / 2, (image.height - (canvas.height / scale)) / 2,
                // 画像の切り取り範囲（幅、高さ）
                canvas.width / scale, canvas.height / scale,
                // キャンバスの貼り付け開始位置（左上からの横距離、縦距離）
                0, 0,
                // 画像への貼り付け範囲（幅、高さ）
                canvas.width, canvas.height
              )
              resolve(canvas)
            }).catch(function (error) {
              reject(error)
            })
          }).catch(function (error) {
            reject(error)
          })
        })
      }

      // [1-A] Fileの中身を得る
      function readImage(image) {
        return new Promise(function (resolve, reject) {
          const reader = new FileReader()
          reader.onload = function () { resolve(reader.result) }
          reader.onerror = function (e) { reject(e) }
          reader.readAsDataURL(image)
        })
      }
      // [1-B] 空の画像データを作った後に中身を投入
      function loadImage(src) {
        return new Promise(function (resolve, reject) {
          const img = new Image()
          img.onload = function () { resolve(img) }
          img.onerror = function (e) { reject(e) }
          img.src = src
        })
      }
    </script>
  </body>
</html>

[1] FileをImageにする
FileReaderでFileの中身を取り出し、空のImageに投入します。
このあたりでPromiseを多用しているためIE用のPolyfillを入れています。

    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
      // ..略
      function imageToCanvas (imageFile) {
        // [1] Fileから画像データを得る
        return new Promise(function (resolve, reject) {
          readImage(imageFile).then(function (src) {
            loadImage(src).then(function (image) {
            // ここに画像データ(image)が渡ってくるので処理
            }).catch(function (error) {
              reject(error)
            })
          }).catch(function (error) {
            reject(error)
          })
        })
      }
      // [1-A] Fileの中身を得る
      function readImage(image) {
        return new Promise(function (resolve, reject) {
          const reader = new FileReader()
          reader.onload = function () { resolve(reader.result) }
          reader.onerror = function (e) { reject(e) }
          reader.readAsDataURL(image)
        })
      }
      // [1-B] 空の画像データを作った後に中身を投入
      function loadImage(src) {
        return new Promise(function (resolve, reject) {
          const img = new Image()
          img.onload = function () { resolve(img) }
          img.onerror = function (e) { reject(e) }
          img.src = src
        })
      }

[2] HTML上のCanvasの呼び出し
キャンバスと、その描画用のコンテキストを呼び出します。

              // [2] Canvasの呼び出し
              const canvas = document.getElementById("canvas")
              const ctx = canvas.getContext('2d')

[3] 縮尺の計算
アスペクト比を維持したいので、縦横どちらか大きい方の縮小率を採用します。

              // [3] 縮尺を計算
              const scale = Math.max((canvas.height / image.height), (canvas.width / image.width))

[4] 画像を切り取り、Canvasに展開
CanvasのメソッドdrawImageを使って画像を貼り付け。
この時画像の切り取り範囲とCanvasへの貼付け範囲を一気に指定する。混乱しがち。
本当はここで画像にしたかったが、ブラウザによってこの後のデータの取り出し方が違うのでここではCanvasを返す。

              // [4] 画像を切り取り、Canvasに展開して返す
              ctx.drawImage(
                // Canvasに貼り付ける画像
                image, 
                // 画像の切り取り開始位置（左上からの横距離、縦距離）
                (image.width - (canvas.width / scale)) / 2, (image.height - (canvas.height / scale)) / 2,
                // 画像の切り取り範囲（幅、高さ）
                canvas.width / scale, canvas.height / scale,
                // キャンバスの貼り付け開始位置（左上からの横距離、縦距離）
                0, 0,
                // 画像への貼り付け範囲（幅、高さ）
                canvas.width, canvas.height
              )
              resolve(canvas)

[5] Canvasから画像を取得
Canvasにリサイズ後の画像が表示され、Canvasの各種メソッドでDataURLやBlobが取得出来る。
サンプルではブラウザからダウンロードできるようにした。IEでもいけますがpng固定になるので注意。

          // [5] キャンバスから画像を取得
          if (canvas.msToBlob) { // IEの場合
            window.navigator.msSaveBlob(canvas.msToBlob(), 'resized.png')
          } else { // その他ブラウザ
            const a = document.createElement('a')
            a.href = canvas.toDataURL(file.type)
            a.download = 'resized.' + file.type.split('/')[1]
            a.click()
          }

以上です。