browser-image-compress

简介

• 一个不依赖服务器对图片进行压缩的库， 目前支持 png, jpeg, webp, bmp
• 借助 wasm 的方式，让c++代码，和c++类库高效运行在浏览器里面
• png 压缩使用了业界著名的 libpngquant，效果优异

使用

1. 安装 npm install -S @edu/browser-image-compress
2. 引入 & 使用

   import compress from '@edu/browser-image-compress'
   
   var fileDialog = document.querySelector('input[type=file]')
   var imgPreview = document.querySelector('img.preview')
   
   fileDialog.onchange = async ({ target: { files } }) => {
     let file = files[0]
     const result = await compress(file, {
       quality: 70, 
       maxWidth: 500, //最大宽度
       ditherring: 0.7, //色彩抖动水平
       mode: 2, //压缩模式，1为指定最大颜色数量，规则为 quality * 2； 2为自动计算最大颜色数量
       debug: true, // 打开日志开关
     })
     imgPreview.src =  URL.createObjectURL(res);
   }
   

TODO

• [x] png 格式压缩
• [x] jpeg， bmp格式压缩
• [ ] gif 格式压缩

开发

• js部分开发

  1. 安装依赖 npm run install
  2. 开发模式运行 npm run dev
  3. 生产模式编译 npm run build
  4. 运行demo npm run demo

• c++部分开发

参考

• webassembly Developer’s Guide
• libpngquant
• wasm-image-compressor