next.jsで画像圧縮のblueimp-load-imageしてみる

画像圧縮してFirebaseアップしたかったのでメモ

パッケージインストール

npm install --save blueimp-load-image

canvas->blob変換

blobに変換してFirebaseへ送るようにするとできた

  const dataUri = canvas.toDataURL(type);
  var bin = atob(dataUri.split(',')[1]);
  var buffer = new Uint8Array(bin.length);
  for (var i = 0; i < bin.length; i++) {
    buffer[i] = bin.charCodeAt(i);
  }
  var blob = new Blob([buffer.buffer], { type: type });

画像圧縮してblob変換してストレージへ保存

loadImage.parseMetaData(file, (data) => {
  const options = {
    maxHeight: 300,
    maxWidth: 300,
    canvas: true,
  };
  if (data.exif) {
    options.orientation = data.exif.get('Orientation');
  }
  //画像圧縮
  loadImage(file, (canvas) => {
    //変換
    var type = 'image/jpeg';
    const dataUri = canvas.toDataURL(type);
    var bin = atob(dataUri.split(',')[1]);
    var buffer = new Uint8Array(bin.length);
    for (var i = 0; i < bin.length; i++) {
      buffer[i] = bin.charCodeAt(i);
    }
    var blob = new Blob([buffer.buffer], { type: type });
    //ストレージへ保存
    query.put(blob, { contentType: file.type })
      .then(function (snapshot) {

      }).catch(function (error) {
        console.error("Error getting document:", error);
      });
  }, options);
});

参考サイト

Canvas に描いた画像を png などの形式の Blob に変換する方法: Tender Surrender
https://blog.agektmr.com/2013/09/canvas-png-blob.html

blueimp/JavaScript-Load-Image
https://github.com/blueimp/JavaScript-Load-Image

JavaScript(ES2015&React)で画像を扱う：リサイズとプレビュー表示
https://blog.agektmr.com/2013/09/canvas-png-blob.html