Compressor.js 全面指南：從入門到實戰，掌握前端圖片壓縮技巧
在現代 Web 開發中，圖像處理是一個常見的需求。尤其是在用戶上傳圖片的場景下，如頭像上傳、內容發布等，我們常常需要對圖片進行壓縮以減少體積并提升加載速度。Compressor.js 就是一款輕量而強大的 JavaScript 圖片壓縮庫，它可以在瀏覽器端對圖片進行高質量的壓縮和裁剪操作。
本文將帶你從零開始，逐步掌握 Compressor.js 的使用，并通過一個完整的示例展示其在實際項目中的應用。
一、什么是 Compressor.js？
Compressor.js 是一個基于 HTML5 Canvas 和 JavaScript 編寫的客戶端圖片壓縮工具。它支持多種配置選項，包括壓縮質量、輸出尺寸、旋轉、縮放等功能，適用于現代瀏覽器。
- 支持 JPEG/PNG/WebP 格式
- 壓縮圖片大小，控制畫質
- 裁剪、旋轉、縮放圖片
- 零依賴（不依賴 jQuery 或其他庫）
- 支持 Promise 異步處理
二、安裝與引入方式
你可以通過以下幾種方式引入 Compressor.js：
方法1：使用 npm 安裝（推薦用于模塊化項目）
npm install compressorjs --save然后在你的 JS 文件中導入：
import Compressor from 'compressorjs';方法2：直接引入 CDN（適合傳統網頁）
<script src="https://cdn.jsdelivr.net/npm/compressorjs@1.1.1/dist/compressor.min.js"></script>三、基本用法
假設你有一個 <input type="file" id="file"> 元素，用戶選擇圖片后，我們可以使用 Compressor.js 來壓縮該圖片。
<input type="file" id="file" accept="image/*">
<img id="preview" style="max-width: 100%; margin-top: 20px;" />document.getElementById('file').addEventListener('change', function (e) {
const file = e.target.files[0];
if (!file) return;
new Compressor(file, {
quality: 0.6, // 壓縮質量（0.1 ~ 1）
success(result) {
console.log('壓縮后的文件大小:', result.size);
// 顯示壓縮后的圖片預覽
const reader = new FileReader();
reader.onload = function (event) {
document.getElementById('preview').src = event.target.result;
};
reader.readAsDataURL(result);
},
error(err) {
console.error('壓縮失敗:', err.message);
}
});
});注意：success(result) 中的 result 是一個 Blob 類型的壓縮后文件對象，可以直接上傳服務器。
四、常用配置項詳解
參數名 | 類型 | 默認值 | 描述 |
quality | number | 0.8 | 壓縮質量（僅對 jpeg/webp 生效） |
width | number | undefined | 設置輸出寬度 |
height | number | undefined | 設置輸出高度 |
rotate | number | undefined | 旋轉角度（90/180/270） |
convertSize | number | 5000000 | 大于該值才進行壓縮（單位字節） |
mimeType | string | undefined | 輸出格式，如 'image/jpeg' |
strict | boolean | true | 是否嚴格限制寬高比 |
success | function | required | 成功回調函數 |
error | function | optional | 錯誤回調函數 |
五、進階用法：裁剪 + 壓縮 + 上傳
結合 Cropper.js 可以實現圖片裁剪后再壓縮上傳，是頭像上傳場景的經典組合。
示例流程：
- 用戶選擇圖片
- 使用 Cropper.js 裁剪圖片區域
- 獲取裁剪后的 canvas 數據
- 使用 Compressor.js 壓縮圖片
- 提交至服務器
六、實戰應用：上傳壓縮后的圖片到服務器
function uploadImage(file) {
const formData = new FormData();
formData.append('avatar', file);
fetch('/api/upload', {
method: 'POST',
body: formData,
}).then(res => res.json())
.then(data => {
console.log('上傳成功:', data);
})
.catch(err => {
console.error('上傳失敗:', err);
});
}結合前面的壓縮邏輯：
new Compressor(file, {
quality: 0.6,
success(result) {
uploadImage(result); // 上傳壓縮后的 Blob 文件
}
});七、注意事項與優秀實踐
- 避免重復壓縮：如果圖片已經很?。ㄈ缧∮?100KB），可以跳過壓縮。
- 移動端適配：建議設置最大寬度為 1024px，防止大圖占用過多內存
- 兼容性處理：舊版 IE 不支持 canvas.toBlob()，可考慮添加 polyfill
- 用戶體驗優化：壓縮過程可能會阻塞 UI，建議使用 Web Worker（但 Compressor.js 目前不支持）。
八、總結
Compressor.js 是前端圖像壓縮領域的優秀工具，尤其適合需要在瀏覽器端快速壓縮圖片并上傳的場景。它的 API 簡潔、功能豐富，且易于集成到各類項目中。
