Compressor.js是一個輕量級的JavaScript圖像壓縮庫，專門為瀏覽器環境設計。它利用HTML5 Canvas API的原生toBlob()方法進行圖像壓縮，支持異步操作和靈活的壓縮配置。

項目概述

Compressor.js是一個MIT許可的開源項目，當前版本為1.2.1。該項目主要用於在客户端對上傳前的圖像進行預處理壓縮，能夠顯著減小圖像文件大小，提升網頁加載速度和用户體驗。

核心特性

異步壓縮處理

Compressor.js採用異步壓縮方式，不會阻塞瀏覽器主線程，確保用户體驗流暢。

靈活的配置選項

  • 質量控制：通過quality參數（0-1之間）控制輸出圖像質量
  • 尺寸限制：支持設置最大/最小寬度和高度（maxWidth、maxHeight、minWidth、minHeight）
  • 格式轉換：支持自動轉換圖像格式，可將大尺寸PNG轉換為JPEG
  • EXIF處理：支持讀取和保留JPEG圖像的EXIF方向信息

瀏覽器兼容性

支持所有現代瀏覽器，包括Chrome、Firefox、Safari、Opera、Edge以及Internet Explorer 10+。

安裝和使用

安裝方式

npm install compressorjs

基本用法示例

import Compressor from 'compressorjs';

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  
  new Compressor(file, {
    quality: 0.6,
    maxWidth: 800,
    maxHeight: 600,
    success(result) {
      // 處理壓縮後的圖像
      const formData = new FormData();
      formData.append('file', result, result.name);
      
      // 上傳到服務器
      fetch('/upload', {
        method: 'POST',
        body: formData
      });
    },
    error(err) {
      console.error('壓縮失敗:', err.message);
    }
  });
});

javascript - JS 圖片壓縮 - 個人文章_圖像壓縮

配置選項詳解

質量設置（quality）

控制輸出圖像的質量，推薦值在0.6-0.8之間，可在文件大小和質量之間取得良好平衡。

尺寸限制選項

  • maxWidth/maxHeight：限制圖像最大尺寸
  • minWidth/minHeight：限制圖像最小尺寸
  • width/height：指定精確的輸出尺寸

高級功能

  • checkOrientation：自動校正JPEG圖像的方向（默認開啓）
  • retainExif：保留EXIF信息（默認關閉）
  • convertTypes：指定需要轉換格式的圖像類型
  • convertSize：設置格式轉換的文件大小閾值（默認5MB）

實際應用場景

用户頭像上傳

在用户上傳頭像時自動壓縮圖像，減少服務器存儲壓力。

圖片分享平台

在用户上傳圖片前進行預處理，提升頁面加載速度。

移動端應用

在帶寬有限的移動環境中優化圖像傳輸。

技術實現原理

Compressor.js基於HTML5 Canvas API實現圖像壓縮：

  1. 將圖像繪製到Canvas元素上
  2. 使用Canvas的toBlob()方法進行壓縮
  3. 根據配置選項調整輸出參數
  4. 返回壓縮後的Blob對象

性能優化建議

  • 對於大尺寸圖像（>10MB），建議禁用checkOrientation選項以避免內存溢出
  • 合理設置maxWidth和maxHeight，避免超過Canvas元素的大小限制
  • 根據實際需求調整質量參數，在文件大小和圖像質量之間找到最佳平衡點

總結

Compressor.js作為一個輕量級的客户端圖像壓縮解決方案，為前端開發者提供了簡單易用的圖像預處理工具。其靈活的配置選項和良好的瀏覽器兼容性使其成為提升Web應用性能的理想選擇。