【亲测免费】 开源项目浏览器端图像压缩工具：browser-image-compression 安装教程

1. 项目介绍

browser-image-compression 是一个高效的前端图像压缩库，支持在网页浏览器中对 JPEG、PNG、WEBP 和 BMP 格式的图像进行压缩。通过调整图像分辨率或存储大小来优化上传至服务器前的图片数据，有效节省带宽。它利用可选的多线程（Web Worker）技术实现非阻塞压缩，提高用户体验。

2. 项目下载位置

该项目托管于 GitHub，您可以访问以下链接直接获取：

[GitHub - Donaldcwl/browser-image-compression](https://github.com/Donaldcwl/browser-image-compression)

点击页面上的“Code”按钮，选择“Download ZIP”或使用Git命令行工具克隆仓库到本地：

git clone https://github.com/Donaldcwl/browser-image-compression.git

3. 项目安装环境配置

环境要求：

• Node.js: 为了编译和运行示例，推荐使用Node.js环境。
• npm 或 yarn: 包管理器用于安装依赖项。

图片示例配置步骤：

1. 克隆项目后，进入项目根目录。
2. 安装依赖，打开终端执行：

   npm install 或 yarn install
   

3. （可选）如果您想要查看示例，确保已正确安装依赖后，在项目example目录下运行服务：

   cd example
   npm start 或 yarn start
   

   这将启动一个本地服务器展示图像上传与压缩的实例。

4. 项目安装方式

对于开发者集成到自己的项目中，有两种主要安装方式：

作为ES模块安装

使用npm或yarn添加依赖：

npm install browser-image-compression --save
# 或者, 使用yarn
yarn add browser-image-compression

之后，在项目中按需导入：

import imageCompression from 'browser-image-compression';

直接加载UMD文件或使用CDN

您也可以直接从发布的dist文件夹下载UMD版本的js文件，或者通过CDN链接引入：

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

5. 项目处理脚本示例

一旦安装完成，您可以像下面这样编写脚本来压缩图片：

异步await语法示例

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(`Compressed file size: ${compressedFile.size / 1024 / 1024} MB`);
        // 自定义逻辑上传至服务器
    } catch (error) {
        console.error(error);
    }
}

Promise then/catch语法示例

function handleImageUpload(event) {
    const imageFile = event.target.files[0];
    const options = { maxSizeMB: 1, maxWidthOrHeight: 1920 };
    imageCompression(imageFile, options)
        .then(function(compressedFile) {
            console.log(`Compressed file size: ${compressedFile.size / 1024 / 1024} MB`);
            // 自定义逻辑上传至服务器
        })
        .catch(function(error) {
            console.error(error.message);
        });
}

以上就是将browser-image-compression项目集成到您的应用中的完整步骤，希望这对您的开发工作有所帮助。记得根据实际需求调整选项以达到最佳的压缩效果。