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>

三、基本用法

假设你有一个元素，用户选择图片后，我们可以使用 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 简洁、功能丰富，且易于集成到各类项目中。