js compress image (base64) using canvas api

compress-base64-imgs.js

const toBase64 = (file) => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (e) => resolve(e.target.result);
  reader.onerror = (err) => reject(err);
});

const compressBase64 = (src, quality = 0.5) => new Promise((resolve) => {
  const img = new Image();
  img.src = src;
  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
    resolve(canvas.toDataURL('image/jpeg', quality));
  }
});

<input name="images" type="file" accept="image/*" multiple />

<script src="./compress-base64-imgs.js"></script>
<script>
  document.querySelector('input[name="images"]').addEventListener('change', async (e) => {
    for (file of e.target.files) {
      const origin = await toBase64(file);
      const compressed = await compressBase64(origin, 0.6);
      console.log({ origin, compressed });
    }
  });
</script>