当前位置：首页 > JavaScript

js实现图片压缩

2026-03-01 05:08:29JavaScript

使用Canvas API压缩图片

通过Canvas的drawImage和toDataURL方法实现图片压缩。核心原理是将图片绘制到Canvas上，再转换为指定质量的Blob或Base64数据。

function compressImage(file, quality = 0.7, maxWidth = 800) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 计算缩放比例
        const scale = maxWidth / img.width;
        canvas.width = maxWidth;
        canvas.height = img.height * scale;

        // 绘制到Canvas
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        // 转换为Blob
        canvas.toBlob(
          (blob) => resolve(blob),
          'image/jpeg',
          quality
        );
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

使用第三方库实现压缩

对于更复杂的压缩需求，可以使用专门处理图片压缩的库：

compressorjs - 提供更多压缩选项和更好的兼容性
```
import Compressor from 'compressorjs';
```

new Compressor(file, { quality: 0.6, maxWidth: 1024, success(result) { // 压缩后的文件 }, error(err) { console.error(err.message); }, });


2. browser-image-compression - 支持Web Worker后台压缩
```javascript
import imageCompression from 'browser-image-compression';

const options = {
  maxSizeMB: 1,
  maxWidthOrHeight: 1920,
  useWebWorker: true
};

const compressedFile = await imageCompression(file, options);

压缩时注意事项

图片压缩需要考虑以下因素：

js实现图片压缩

目标格式选择：JPEG适合照片，PNG适合带透明度的图片
质量参数平衡：通常0.6-0.8在质量和文件大小间取得较好平衡
分辨率控制：根据实际显示需求限制最大宽度/高度
异步处理：大文件压缩应使用Web Worker避免阻塞UI

完整示例代码

async function handleImageUpload(event) {
  const file = event.target.files[0];
  if (!file) return;

  try {
    const compressedBlob = await compressImage(file);

    // 使用压缩后的文件
    const formData = new FormData();
    formData.append('image', compressedBlob, file.name);

    // 上传或进一步处理...
  } catch (error) {
    console.error('压缩失败:', error);
  }
}

document.getElementById('file-input').addEventListener('change', handleImageUpload);