前端压缩图片

在前端压缩图片可以通过多种方法实现，以下是一些常见的方式和工具：

1. 使用 Canvas

可以使用 HTML5 的 <canvas> 元素来压缩图片。以下是一个基本示例：

<input type="file" id="upload" accept="image/*" />
<canvas id="canvas" style="display:none;"></canvas>
<img id="output" />

<script>
document.getElementById('upload').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    const img = new Image();
    img.src = e.target.result;

    img.onload = function() {
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // 设置 canvas 大小为图片大小
      canvas.width = img.width;
      canvas.height = img.height;

      // 绘制图片到 canvas
      ctx.drawImage(img, 0, 0);

      // 压缩并转换为 base64
      const quality = 0.7; // 压缩质量 0-1
      const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);

      // 显示压缩后的图片
      document.getElementById('output').src = compressedDataUrl;
    };
  };

  reader.readAsDataURL(file);
});
</script>

2. 使用第三方库

有许多库可以帮助你更方便地压缩图片，例如：

• Compress.js: 一个轻量级的库，可以在浏览器中压缩图片。

<script src="https://cdnjs.cloudflare.com/ajax/libs/compress.js/1.0.7/compress.min.js"></script>
<script>
const inputElement = document.getElementById('upload');
inputElement.addEventListener('change', async (event) => {
  const files = event.target.files;
  const compress = new Compress();

  const image = await compress.compress(files, {
    size: 4, // 最大文件大小，单位 MB
    quality: 0.75, // 压缩质量
    maxWidth: 1920, // 最大宽度
    maxHeight: 1920, // 最大高度
    resize: true, // 是否调整大小
  });

  const img = image[0];
  const base64str = img.data; // 压缩后的 base64 字符串
  const imgElement = document.createElement('img');
  imgElement.src = `data:${img.ext};base64,${base64str}`;
  document.body.appendChild(imgElement);
});
</script>

3. 使用 FileReader 和 Blob

另一种方法是使用 FileReader 和 Blob 对象来处理文件。

function compressImage(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = function(event) {
      const img = new Image();
      img.src = event.target.result;

      img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const quality = 0.7; // 压缩质量

        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);

        canvas.toBlob((blob) => {
          resolve(blob);
        }, 'image/jpeg', quality);
      };
    };
    reader.readAsDataURL(file);
  });
}