在现代 Web 开发中，优化图片资源对于提升页面加载速度和用户体验至关重要。Compressor.js 是一个轻量级的 JavaScript 库，专为在浏览器端进行高效的图片压缩而设计，具有零依赖、易于集成等特点。([Medium][1])
🎯 Compressor.js 简介
Compressor.js 利用浏览器原生的 canvas.toBlob() API 实现图片压缩，支持 JPEG、PNG、WEBP 等主流格式。其核心优势包括：([npm][2])
- 纯前端处理：无需后端支持，适用于各种前端框架。
- 零依赖：库本身仅约 4KB，加载迅速。
- 丰富的配置选项：支持质量调整、尺寸限制、格式转换等。
- 兼容性强：支持现代主流浏览器，包括移动端。
🚀 安装与引入
使用 npm 安装
npm install compressorjs
或通过 CDN 引入
<script src="https://cdn.jsdelivr.net/npm/compressorjs@1.2.1/dist/compressor.min.js"></script>
🔧 基础用法
以下示例展示了如何在用户选择图片后进行压缩并上传：
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);
},
});
⚙️ 高级配置选项
Compressor.js 提供了多种配置参数，以满足不同的压缩需求：
尺寸限制：
width/height：固定输出尺寸。resize：缩放模式，可选值包括'cover'、'contain'等。
格式转换：
convertSize：超过指定大小（单位：字节）的图片自动转换为 JPEG 格式。mimeType：指定输出格式，如'image/jpeg'、'image/png'等。
方向与元数据：
checkOrientation：检查并修正 EXIF 方向信息。retainExif：保留原始 EXIF 元数据。
钩子函数：
beforeDraw：在绘制前对 Canvas 进行处理，例如添加滤镜。drew：在绘制后进行处理，例如添加水印。
🧪 实践示例：图片压缩与预览
以下示例实现了图片的压缩、预览及压缩信息的展示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片压缩示例</title>
</head>
<body>
<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转换为JPEG
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<br>
压缩后：${(result.size / 1024).toFixed(2)}KB<br>
压缩率：${(100 - (result.size / file.size * 100)).toFixed(1)}%
`;
preview.innerHTML = '';
preview.append(origin, compressed, info);
},
error(err) {
alert(`压缩失败: ${err.message}`);
}
});
});
</script>
</body>
</html>
⚠️ 注意事项
格式支持：Compressor.js 支持 JPEG、PNG、WEBP 等格式，但不支持 HEIC 格式。
浏览器兼容性：在 Safari 14 以下版本中，WEBP 格式可能不被支持。
质量设置建议：
- JPEG：推荐质量设置在 0.6 至 0.8 之间。
- PNG：建议保持质量为 1.0，以实现无损压缩。
性能优化：对于大文件（超过 5MB），建议先进行分片读取，以避免阻塞主线程。
旧版浏览器支持：对于不支持 Promise 的旧版浏览器，可引入 polyfill：([GitHub][3])
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4.2.8/dist/es6-promise.auto.min.js"></script>
✅ 总结
Compressor.js 提供了一种高效、灵活的方式，在客户端对图片进行压缩处理，适用于图片上传前的预处理、移动端 H5 应用的图片优化等场景。通过合理配置参数，开发者可以在不依赖后端的情况下，实现高质量的图片压缩，提升用户体验，节省服务器带宽和存储空间。