浏览器图像压缩工具教程

最新推荐文章于 2024-08-09 08:04:10 发布

晏惠娣Elijah

最新推荐文章于 2024-08-09 08:04:10 发布

阅读量396

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00336/article/details/141044122

版权

浏览器图像压缩工具教程

browser-image-compressionImage compression in web browser项目地址:https://gitcode.com/gh_mirrors/br/browser-image-compression

项目介绍

browser-image-compression 是一个用于在浏览器中压缩图像的 JavaScript 库。它支持 JPEG 和 PNG 格式的图像，通过减少图像的分辨率或文件大小来实现压缩。这个库非常适合需要在客户端进行图像处理的 web 应用，例如上传前压缩图像以减少服务器负载和提高页面加载速度。

项目快速启动

安装

你可以通过 npm 安装 browser-image-compression：

npm install browser-image-compression

使用示例

以下是一个简单的使用示例，展示了如何使用 browser-image-compression 来压缩图像：

import imageCompression from 'browser-image-compression';

async function handleImageUpload(event) {
  const file = event.target.files[0];
  console.log('原文件大小:', file.size / 1024 / 1024, 'MB');

  const options = {
    maxSizeMB: 1,
    maxWidthOrHeight: 1024,
    useWebWorker: true
  };

  try {
    const compressedFile = await imageCompression(file, options);
    console.log('压缩后文件大小:', compressedFile.size / 1024 / 1024, 'MB');
    // 这里可以上传压缩后的文件到服务器
  } catch (error) {
    console.log(error);
  }
}

document.getElementById('image-upload').addEventListener('change', handleImageUpload);