前端图片压缩compressorjs

574 阅读1分钟

项目中:

npm install compressorjs

需要的页面内引入:

import Compressor from 'compressorjs';

自定义压缩方法: `

CompressorImg(file, quality = 0.6) {
  const that = this
  return new Promise((resolve, reject) => {
    new Compressor(file, {
      quality, //压缩质量 0-1
      maxWidth:400, //需要压缩后的宽度
      maxHeight:600, //需要压缩后的高度
      convertTypes: [file.type], //转换的类型
      async success(result) {
        let newfile = new File([result], file.name, { type: file.type });
        const newfileSize =
            Math.ceil(
                (parseInt(String(newfile.size), 10) / 1024) * 1000
            ) / 1000;
        if (newfileSize > 200) {
          const nextQuality = quality * 0.5;
          if (nextQuality < 0.001) {
            console.warn(
                "compress fail-->>quality < 0.0001, please check img"
            );
            resolve(null);
            return;
          }
          newfile = await that.CompressorImg(
              newfile,
              quality * 0.5
          );
        }
        resolve(newfile);
      },
      error(err) {
        console.warn("compress fail-->>", err);
        reject();
      },
    });
  });
}

这里控制输出的是一个图片地址!

let url = await this.CompressorImg(sourceFile)

`