浏览器图片压缩库Browser Image Compression技术文档

最新推荐文章于 2024-11-19 13:32:15 发布

柳俐文Tower

最新推荐文章于 2024-11-19 13:32:15 发布

阅读量1.4k

点赞数 28

本文链接：https://blog.csdn.net/gitblog_01242/article/details/143041509

版权

浏览器图片压缩库Browser Image Compression技术文档

browser-image-compression Image compression in web browser 项目地址: https://gitcode.com/gh_mirrors/br/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等，供深入定制使用。