@gaoding/image-utils

图片压缩 SDK

基于 Squoosh 封装, 内置 pica 通过 resize 传参， url 支持 File 对象 或者 图片链接,

demo 页的服务端压缩需要启动项目 image-uploader

### install
npm install @gaoding/image-utils

### 启动 demo 页
npm run dev

### 打包
npm run build

Usage

// 默认导出 `Compress`
import Compress, { blobToArrayBuffer } from '@gaoding/image-utils';

const compress = new Compress(options);

compress.process({
  url: '',
  quality: 80,
  compress: false // 默认 true，false 则不压缩
});

compress.event.on('processStart', () => {
  console.log('图片开始处理');
})
compress.event.on('processing', (data) => {
  console.log(data);
})
compress.event.on('processEnd', (blob) => {
  console.log('图片压缩完成', blob);
})

提供以下工具

blobToArrayBuffer(blob: Blob): Promise

canvasEncode(data: ImageData, type: string, quality?: number): Promise

resize(data: ImageData, opts: ResizeOptions): ImageData

processSvg(blob: Blob): Promise

decodeFile(file: File): Promise<ImageData | undefined>

blobToImg(blob: Blob): Promise<HTMLImageElement | undefined>

resize 字段默认按 width 比例缩放

worker

In order to use worker, you should npm install worker-loader -D and add worker rule for webpack on your own project.

  rules: {
      …,
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
  }

TODO

• [x] 优化打包构建

• [x] 支持异步引入模块

• [x] worker 支持