【亲测免费】 图像压缩工具——Compressor.js 使用教程

1. 项目介绍

Compressor.js 是一个基于 JavaScript 的图像压缩库，它使用浏览器原生的 HTMLCanvasElement.toBlob() 方法进行图像压缩。这个库提供了异步的压缩方式，并且支持在不同浏览器中具有不同的压缩效果。通常用于在客户端对图像进行预压缩，然后再上传到服务器。

2. 项目快速启动

首先，您需要引入 Compressor.js 库到您的项目中。可以通过 npm 安装或者直接在 HTML 文件中通过 <script> 标签引入。

通过 npm 安装

npm install compressorjs

在 HTML 中直接引入

<script src="path/to/compressor.min.js"></script>

以下是一个简单的使用 Compressor.js 的示例：

<input type="file" id="file" accept="image/*">
<script src="path/to/compressor.min.js"></script>
<script>
document.getElementById('file').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) {
        return;
    }
    new Compressor(file, {
        quality: 0.6,
        success(result) {
            const formData = new FormData();
            formData.append('file', result, result.name);
            // 这里使用 axios 发送压缩后的图像到服务器
            axios.post('/path/to/upload', formData).then(() => {
                console.log('上传成功');
            });
        },
        error(err) {
            console.log(err.message);
        },
    });
});
</script>

3. 应用案例和最佳实践

应用案例

• 用户头像上传：在用户上传头像时，使用 Compressor.js 对图像进行压缩，以减少上传时间和服务器存储压力。
• 图片分享：在社交平台上分享图片时，预先压缩图片可以加快图片加载速度，提升用户体验。

最佳实践

• 设置合适的压缩质量：根据实际需求调整 quality 参数，以平衡图像质量和文件大小。
• 处理不同格式的图像：利用 mimeType 参数，确保不同格式的图像能够被正确处理。
• 考虑 Exif 信息：如果需要保留图像的 Exif 信息，可以设置 retainExif 参数为 true。

4. 典型生态项目

Compressor.js 作为图像处理的一部分，可以与以下项目或工具结合使用，以构建更加完善的应用：

• **-Uploader：一个用于文件上传的库，可以与 Compressor.js 集成，实现压缩后再上传的功能。
• **Cropper.js：一个图像裁剪库，与 Compressor.js 一起使用，可以在压缩前对图像进行裁剪。
• **Canvas API：利用 Canvas API 进行图像的进一步处理，比如绘制、添加水印等。