【亲测免费】 浏览器图片压缩库Browser Image Compression技术文档

本技术文档旨在详细指导用户如何使用Browser Image Compression库来在前端实现高效图片压缩功能。此库支持JPEG、PNG、WebP和BMP格式的图片，并可通过调整分辨率或存储大小来优化上传到服务器前的图片数据，有效节省带宽。

安装指南

使用npm或yarn（推荐）

在终端执行以下命令以将库添加至您的项目：

npm install browser-image-compression --save
# 或者如果您使用yarn
yarn add browser-image-compression

之后，在JavaScript文件中通过ES模块引入：

import imageCompression from 'browser-image-compression';

使用UMD版本或CDN

若不使用构建工具，可以直接通过CDN加载库：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js"></script>

随后在全球作用域下即可访问imageCompression函数。

项目使用说明

基础使用

通过HTML中的文件输入元素收集图片，并调用imageCompression处理图片。

<input type="file" accept="image/*" onchange="handleImageUpload(event);">

异步等待语法示例

async function handleImageUpload(event) {
  const imageFile = event.target.files[0];
  const options = {
    maxSizeMB: 1,
    maxWidthOrHeight: 1920,
    useWebWorker: true,
  };
  try {
    const compressedFile = await imageCompression(imageFile, options);
    console.log(`压缩后的文件大小：${compressedFile.size / 1024 / 1024} MB`);
    // 自定义上传逻辑
    // uploadToServer(compressedFile);
  } catch (error) {
    console.error(error);
  }
}

承诺链语法示例

function handleImageUpload(event) {
  var imageFile = event.target.files[0], options = {
    maxSizeMB: 1,
    useWebWorker: true
  };
  imageCompression(imageFile, options)
    .then(function (compressedFile) {
      console.log(`压缩后的文件大小：${compressedFile.size / 1024 / 1024} MB`);
      // 自定义上传逻辑
    })
    .catch(function (err) {
      console.error(err.message);
    });
}

API使用文档

主要函数imageCompression(file, options)接收一个File对象以及包含压缩选项的对象。关键选项包括：

• maxSizeMB: 图片最大压缩后大小(MB)，默认无限制。
• maxWidthOrHeight: 最大宽度或高度，自动按比例缩小直到不超过该值，同时考虑浏览器的最大Canvas尺寸限制。
• onProgress(progress): 进度回调函数。
• useWebWorker: 是否使用Web Worker进行非阻塞压缩，默认启用。
• libURL: 工作线程中使用的库地址，默认为CDN链接。
• preserveExif: 是否保留EXIF信息，默认不保留。
• signal: 可用于取消操作的AbortSignal对象。
• 更多高级选项如：maxIteration, exifOrientation, fileType, initialQuality, alwaysKeepResolution等，供深入定制使用。

注意事项

• 每个浏览器对Canvas的最大尺寸有限制，请参考MDN文档了解详情。
• 支持中断压缩操作，但需浏览器兼容AbortController，具体兼容性见Can I use。

项目特性与限制

• 兼容性良好，覆盖了最新版本的主要浏览器，对于不支持现代ES特性的IE，需要手动引入core-js等polyfill。
• 提供了辅助函数以应对高级需求，例如从文件获取data URL、将data URL转换回文件等。
• 默认情况下不支持旧版IE，需额外配置才能在这些环境中运行。

结论

Browser Image Compression提供了一个简洁而强大的API，使得前端开发者能够轻松地在浏览器端实施图片压缩策略，不仅优化了用户体验，也提升了应用程序的整体性能和效率。合理利用其提供的选项和特性，可以有效适应各种图片处理场景，满足不同应用的需求。