Compressor.js 全面指南：从入门到实战，掌握前端图片压缩技巧

简介：了解如何使用 Compressor.js 实现高效的前端图片压缩。本文涵盖 Compressor.js 的基本用法、核心配置项、图像裁剪与上传实战，适合 Web 开发者快速上手并应用于真实项目中

在现代 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>

三、基本用法

假设你有一个 <input type="file" id="file"> 元素，用户选择图片后，我们可以使用 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 可以实现图片裁剪后再压缩上传，是头像上传场景的经典组合。

示例流程：

1. 用户选择图片
2. 使用 Cropper.js 裁剪图片区域
3. 获取裁剪后的 canvas 数据
4. 使用 Compressor.js 压缩图片
5. 提交至服务器

六、实战应用：上传压缩后的图片到服务器

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 文件
  }
});

七、注意事项与最佳实践

1. 避免重复压缩：如果图片已经很小（如小于 100KB），可以跳过压缩。
2. 移动端适配：建议设置最大宽度为 1024px，防止大图占用过多内存
3. 兼容性处理：旧版 IE 不支持 canvas.toBlob()，可考虑添加 polyfill
4. 用户体验优化：压缩过程可能会阻塞 UI，建议使用 Web Worker（但 Compressor.js 目前不支持）。

总结

Compressor.js 是前端图像压缩领域的优秀工具，尤其适合需要在浏览器端快速压缩图片并上传的场景。它的 API 简洁、功能丰富，且易于集成到各类项目中。

 

有遗漏或者不对的可以在我的公众号留言哦