simple-image-compression

Compress images in the browser

Usage

• view example/index.html

<div class="example">
    <div class="title">图片上传压缩例子</div>
    <input type="file" name="file" id="file">
    <div class="box">
        压缩前大小(b): <span id="prev" style="margin-right: 40px"></span>
        压缩后大小(b): <span id="next"></span>
    </div>
</div>

 import compress from simple-image-compression
  const file = document.getElementById('file');
  file.addEventListener('change', async () => {
      const prev = document.getElementById('prev')
      const next = document.getElementById('next')
      prev.innerHTML = ""
      next.innerHTML = ""
      const f = file.files[0]
      const fileSize = f.size / 1024 / 1024;
      prev.innerHTML = f.size
      const quality = 1 / (Math.ceil(fileSize) + 4);
      const compressImageFile = await compress(f, quality)
      next.innerHTML = compressImageFile.size
      file.value = ""
  })