純前端做圖片壓縮？請使用這個神庫！

作者：林三心不學挖掘機 2025-05-06 07:55:00

Compressor.js 是一個基于 JavaScript 的輕量級圖片壓縮庫（僅4KB），無需后端支持即可在瀏覽器端實現(xiàn)高質量的圖片壓縮。

Compressor.js 是一個基于 JavaScript 的輕量級圖片壓縮庫（僅4KB），無需后端支持即可在瀏覽器端實現(xiàn)高質量的圖片壓縮。它通過Canvas實現(xiàn)圖片處理，支持調整壓縮質量、尺寸縮放、格式轉換等核心功能。

核心優(yōu)勢：

零依賴，純客戶端處理
支持主流圖片格式（JPEG/PNG/WEBP）
保留EXIF方向信息
提供豐富的配置選項
兼容現(xiàn)代瀏覽器（包括移動端）

使用場景

上傳圖片前的客戶端預處理
移動端H5應用的圖片優(yōu)化
節(jié)省服務器帶寬和存儲空間
提升用戶上傳體驗

npm install compressorjs

<script src="https://cdn.jsdelivr.net/npm/compressorjs@1.2.1/dist/compressor.min.js"></script>

基礎使用

// 獲取文件對象（例如通過input[type=file]）
const file = document.querySelector('input[type=file]').files[0];

// 初始化壓縮器
new Compressor(file, {
quality: 0.8, // 壓縮質量（0-1）
maxWidth: 1920, // 最大寬度
maxHeight: 1080, // 最大高度
  success(result) {
    // 壓縮成功回調
    const formData = new FormData();
    formData.append('file', result, result.name);
    
    // 上傳到服務器示例
    fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });
  },
  error(err) {
    console.error('壓縮失敗:', err);
  },
});

進階配置說明

new Compressor(file, {
// 壓縮質量配置
quality: 0.6,

// 尺寸限制
width: 800,      // 固定寬度
height: 600,     // 固定高度
resize: 'cover', // 縮放模式（cover/contain等）

// 格式轉換
convertSize: 102400, // 超過100KB自動轉成JPEG
mimeType: 'auto',    // 自動檢測最佳格式

// 高級處理
strict: true,      // 嚴格模式（精確尺寸）
orient: true,      // 保持EXIF方向信息
checkOrientation: true, // 檢查EXIF方向

// 鉤子函數(shù)
  beforeDraw(ctx, canvas) {
    // 壓縮前可對Canvas進行額外處理
    ctx.filter = 'grayscale(100%)';
  },

  drew(ctx, canvas) {
    // 壓縮后可進行后處理
    const watermark = document.createElement('img');
    watermark.onload = () => {
      ctx.drawImage(watermark, 10, 10, 100, 50);
    };
    watermark.src = '/watermark.png';
  },
});

完整示例代碼

<!DOCTYPE html>
<input type="file" accept="image/*" id="uploader">
<div id="preview"></div>

<script src="https://cdn.jsdelivr.net/npm/compressorjs@1.2.1/dist/compressor.min.js"></script>
<script>
document.getElementById('uploader').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;

  new Compressor(file, {
    quality: 0.7,
    maxWidth: 1024,
    convertSize: 500000, // 超過500KB轉成WEBP
    success(result) {
      // 顯示壓縮前后對比
      const preview = document.getElementById('preview');
      
      // 原始文件預覽
      const origin = new Image();
      origin.src = URL.createObjectURL(file);
      origin.style = 'width: 300px; border: 2px solid red;';
      
      // 壓縮后預覽
      const compressed = new Image();
      compressed.src = URL.createObjectURL(result);
      compressed.style = 'width: 300px; border: 2px solid green;';
      
      // 顯示文件信息
      const info = document.createElement('div');
      info.innerHTML = `
        原始大?。?{(file.size/1024).toFixed(2)}KB
        壓縮后：${(result.size/1024).toFixed(2)}KB
        壓縮率：${(100 - (result.size/file.size*100)).toFixed(1)}%
      `;
      
      preview.append(origin, compressed, info);
    },
    error(err) {
      alert(`壓縮失敗: ${err.message}`);
    }
  });
});
</script>

注意事項

(1) 格式轉換限制：Safari 14以下不支持WEBP格式

(2) 質量設置建議：

JPEG推薦0.6-0.8
PNG推薦保持1.0（無損）

(3) 性能優(yōu)化：大文件（>5MB）建議先分片讀取

(4) 兼容性處理：對于舊版瀏覽器需要polyfill：

// 添加Promise polyfill
if (typeof Promise === 'undefined') {
  script.async = false;
  document.write('<script src="https://cdn.jsdelivr.net/npm/es6-promise@4.2.8/dist/es6-promise.auto.min.js"><\/script>');
}

責任編輯：趙寧寧來源：前端之神

JavaScrip 圖片壓縮前端