canvasで画像をwebpに変換する

以前にcanvasの内容を画像に変換する記事を投稿しましたが、変換時のファイル形式でwebpを指定することもできるので、ローカルの画像をwebp形式に変換する仕組みを実装してみます。

対応ブラウザ

今回使用するtoDataURL()は主要なブラウザで対応していますが、webp形式を指定する場合はSafariで対応していないようです。
指定した形式に対応していない場合、png形式での書き出しになります。

今回のサンプルではSafariは考慮に含めていません。(ファイル拡張子は.webpで、中身はpng形式の画像が出力されます。)

サンプルコード

ローカルから画像を選択する形にするため、input type=”file” と変換結果を出力する#result を配置します。

<input type="file" id="file" accept=".jpg,.jpeg,.png" multiple />
<ul id="result"></ul>

inputには複数選択できるようにmultipleと、acceptでjpgとpngのファイルのみ受け付けるように設定しています。

次にinputで選択した画像をwebpに変換する処理です。

const quality = 0.8;
let reader = [];
let fileData = [];

// ファイルが選択されたとき
document.getElementById('file').addEventListener('change', function(e) {
  reader = [];
  fileData = [];
  const fileLength = e.target.files.length;
  for (let i = 0; i < e.target.files.length; i++) {
    reader[i] = new FileReader();
    // ファイルの読み取り失敗時の処理
    reader[i].onerror = function() {
      alert('ファイル読み取りに失敗しました');
    }
    // ファイルの読み取り成功時の処理
    reader[i].onload = function() {
      const data = reader[i].result;
      const size = e.target.files[i].size;
      let names = e.target.files[i].name.split('.');
      names.pop();
      const name = names.join('.');
      fileData.push({
        data: data,
        name: name
      });
      // 全てのファイル読み取り完了後、変換処理実行
      if(fileData.length >= fileLength) {
        convert_image();
      }
    }
    // ファイルの読み取り実行
    reader[i].readAsDataURL(e.target.files[i]);
  }
});

function convert_image() {
  for (let i = 0; i < fileData.length; i++) {
    // canvasと読み込む画像の生成
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = document.createElement('img');
    // 変換前の画像読み込み後の処理
    img.addEventListener('load', function(e) {
      // 画像の実サイズ取得してcanvas内に描画
      fileData[i].width = img.naturalWidth;
      fileData[i].height = img.naturalHeight;
      canvas.width = fileData[i].width;
      canvas.height = fileData[i].height;
      ctx.drawImage(img, 0, 0, fileData[i].width, fileData[i].height);
      // canvasの内容をwebp形式で保存
      const data = canvas.toDataURL('image/webp', quality);
      // ダウンロードリンクの生成
      const a = document.createElement('a');
      a.href = data;
      a.setAttribute('download', fileData[i].name+'.webp');
      a.innerText = fileData[i].name+'.webp';
      const li = document.createElement('li');
      li.appendChild(a);
      document.getElementById('result').appendChild(li);
    });
    img.src = fileData[i].data;
  }
}

これでwebpに変換してダウンロードできるようになりました。
webpに変換するデモページ
画質やサイズの調整が必要な場合、1行目の0.8を0〜1の範囲で変更することで調整できます。