Compressor.js 图像压缩工具：5分钟掌握前端图片优化技巧

Compressor.js 图像压缩工具：5分钟掌握前端图片优化技巧

【免费下载链接】compressorjs 项目地址: https://gitcode.com/gh_mirrors/com/compressorjs

Compressor.js 是一个功能强大的 JavaScript 图像压缩工具，它利用浏览器原生的 Canvas API 实现异步压缩，能够显著减小图片文件大小，提升网页加载速度和用户体验。在前端开发中，图像压缩是优化性能的关键环节，Compressor.js 为此提供了简单易用的解决方案。

快速上手：3种安装方式任选

通过 npm 安装（推荐）

npm install compressorjs

通过 CDN 引入

<script src="https://unpkg.com/compressorjs/dist/compressor.min.js"></script>

本地文件引入

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

核心功能详解：从基础到高级

基础压缩配置

import Compressor from 'compressorjs';

const file = e.target.files[0]; // 从文件输入框获取图片文件

new Compressor(file, {
  quality: 0.6, // 压缩质量，0-1之间
  success(result) {
    // 处理压缩后的图片
    console.log('压缩成功', result);
  },
  error(err) {
    // 处理压缩失败情况
    console.error('压缩失败', err.message);
  },
});

图像尺寸控制

new Compressor(file, {
  maxWidth: 1920,   // 最大宽度
  maxHeight: 1080,    // 最大高度
  minWidth: 100,       // 最小宽度
  minHeight: 100,      // 最小高度
  resize: 'contain',   // 调整模式：none/contain/cover
});

实用场景：灰度处理与添加水印

灰度效果处理

通过 beforeDraw 钩子函数，在绘制前对图像应用灰度滤镜：

new Compressor(file, {
  beforeDraw(context) {
    context.filter = 'grayscale(100%)';
  },
  success(result) {
    // 显示处理后的灰度图像
  }
});

添加自定义水印

使用 drew 钩子函数在压缩后的图像上添加水印：

new Compressor(file, {
  drew(context, canvas) {
    context.fillStyle = '#fff';
    context.font = '2rem serif';
    context.fillText('Powered by Compressor.js', 20, canvas.height - 20);
  },
  success(result) {
    // 显示带水印的图像
  }
});

性能优化技巧

质量与文件大小的平衡

质量设置	压缩效果	适用场景
0.6-0.8	最佳平衡	用户头像、产品图片
0.4-0.6	中等压缩	缩略图、预览图
0.2-0.4	高压缩率	背景图、不需要高清的图片

大文件处理策略

对于超过 10MB 的大文件，建议禁用 checkOrientation 选项以避免内存溢出：

new Compressor(file, {
  checkOrientation: false,
  quality: 0.6
});

常见问题解答

为什么压缩后的图片反而变大了？

当设置 quality: 1 时，压缩后的图片大小可能比原图更大。建议使用 0.6-0.8 的质量设置，在大多数情况下都能获得理想的压缩效果。

如何保留图片的 Exif 信息？

默认情况下，Compressor.js 会移除图片的 Exif 信息。如需保留，请设置 retainExif: true：

new Compressor(file, {
  retainExif: true,
  quality: 0.7
});

进阶用法：文件类型转换

自动转换大尺寸 PNG 为 JPEG

new Compressor(file, {
  convertTypes: ['image/png'],
  convertSize: 5000000, // 5MB
  quality: 0.8
});

最佳实践总结

1. 合理设置质量参数：0.6-0.8 通常是最佳选择
2. 控制图像尺寸：设置合理的最大宽度和高度
3. 处理大文件：禁用方向检查以避免内存问题
4. 利用钩子函数：实现灰度、水印等特效
5. 文件格式优化：大尺寸 PNG 自动转为 JPEG

通过掌握这些技巧，您可以在前端项目中轻松实现图像压缩优化，提升应用性能和用户体验。

【免费下载链接】compressorjs 项目地址: https://gitcode.com/gh_mirrors/com/compressorjs