クライアントサイドのJSで画像を圧縮する Compressor.js

npm i compressorjs

// 画像ファイルを圧縮する関数
function compressImage(file) {
  return new Promise((resolve, reject) => {
   // 最大ファイルサイズ(bytes)を指定する。この値を超えるファイルは JPEG に変換される
    const maxSizeInBytes = 800 * 1024; // =0.8MB in bytes
 
  // 圧縮する
    new Compressor(file, {
      quality: 0.8,
      convertSize: maxSizeInBytes,
      maxWidth: 512,
      success(result) {
        console.log('Original file size:', file.size / 1024, 'KB');
        console.log('Compressed file size:', result.size / 1024, 'KB');
        console.log('Compressed image width:', result.width, 'px');
        resolve(result);
      },
      error(err) {
        reject(err);
      },
    });
  });
}

// ファイルが選択されたら自動的に圧縮される
 
const inputElement = document.getElementById('imageInput');
 
inputElement.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  try {
    const compressedFile = await compressImage(file);
    // 圧縮されたファイルを使う (APIに送信したり、画面に表示したり)
  } catch (error) {
    console.error('Compression error:', error);
  }
});