Compressor.js 是一個(gè)基于 JavaScript 的輕量級(jí)圖片壓縮庫(kù)（僅4KB），無(wú)需后端支持即可在瀏覽器端實(shí)現(xiàn)高質(zhì)量的圖片壓縮。它通過(guò)Canvas實(shí)現(xiàn)圖片處理，支持調(diào)整壓縮質(zhì)量、尺寸縮放、格式轉(zhuǎn)換等核心功能。
核心優(yōu)勢(shì)：
- 兼容現(xiàn)代瀏覽器（包括移動(dòng)端）
使用場(chǎng)景
- 移動(dòng)端H5應(yīng)用的圖片優(yōu)化
- 節(jié)省服務(wù)器帶寬和存儲(chǔ)空間
npm install compressorjs
<script src="https://cdn.jsdelivr.net/npm/compressorjs@1.2.1/dist/compressor.min.js"></script>
基礎(chǔ)使用
// 獲取文件對(duì)象（例如通過(guò)input[type=file]）
const file = document.querySelector('input[type=file]').files[0];
// 初始化壓縮器
new Compressor(file, {
quality: 0.8, // 壓縮質(zhì)量（0-1）
maxWidth: 1920, // 最大寬度
maxHeight: 1080, // 最大高度
success(result) {
// 壓縮成功回調(diào)
const formData = new FormData();
formData.append('file', result, result.name);
// 上傳到服務(wù)器示例
fetch('/api/upload', {
method: 'POST',
body: formData,
});
},
error(err) {
console.error('壓縮失敗:', err);
},
});
進(jìn)階配置說(shuō)明
new Compressor(file, {
// 壓縮質(zhì)量配置
quality: 0.6,
// 尺寸限制
width: 800, // 固定寬度
height: 600, // 固定高度
resize: 'cover', // 縮放模式（cover/contain等）
// 格式轉(zhuǎn)換
convertSize: 102400, // 超過(guò)100KB自動(dòng)轉(zhuǎn)成JPEG
mimeType: 'auto', // 自動(dòng)檢測(cè)最佳格式
// 高級(jí)處理
strict: true, // 嚴(yán)格模式（精確尺寸）
orient: true, // 保持EXIF方向信息
checkOrientation: true, // 檢查EXIF方向
// 鉤子函數(shù)
beforeDraw(ctx, canvas) {
// 壓縮前可對(duì)Canvas進(jìn)行額外處理
ctx.filter = 'grayscale(100%)';
},
drew(ctx, canvas) {
// 壓縮后可進(jìn)行后處理
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, // 超過(guò)500KB轉(zhuǎn)成WEBP
success(result) {
// 顯示壓縮前后對(duì)比
const preview = document.getElementById('preview');
// 原始文件預(yù)覽
const origin = new Image();
origin.src = URL.createObjectURL(file);
origin.style = 'width: 300px; border: 2px solid red;';
// 壓縮后預(yù)覽
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>
注意事項(xiàng)
- 格式轉(zhuǎn)換限制：Safari 14以下不支持WEBP格式
- 性能優(yōu)化：大文件（>5MB）建議先分片讀取
- 兼容性處理：對(duì)于舊版瀏覽器需要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>');
}
閱讀原文：原文鏈接
該文章在 2025/5/6 12:15:13 編輯過(guò)
400 186 1886
