前端图片压缩compressorjs

前端图片压缩

一、安装依赖–compressorjs

命令行输入

npm i compressorjs

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

1.引入库

代码如下（示例）：

import Compressor from "compressorjs";

2.这里示例用的vant UI的upload，需要在文件上传之前对图片进行压缩（beforeRead）

代码如下（示例）：

    <van-uploader
      v-model="fileList"
      :before-read="beforeRead"
      capture="camera"
      accept="image/*"
      preview-image
    >



methods: {
	// 文件上传之前对图片进行压缩
    async beforeRead(file) {
      let quality = 1;
      if (file.size < 1000 * 1000) {
        //小于1M
        quality = 0.8;
      } else if (file.size < 5000 * 1000) {
        //小于5M
        quality = 0.5;
      } else if (file.size < 10000 * 1000) {
        //小于10M
        quality = 0.4;
      } else {
        //大于10M
        quality = 0.3;
      }

      return new Promise((resolve, reject) => {
        new Compressor(file, {
          // 压缩质量，0-1之间。数字越小，压缩比越高
          quality: quality,
          success(result) {
            // 默认返回result是blob类型的文件，可以转成file并返回，交给beforeRead钩子进行上传
            let newFile = new File([result], file.name, { type: file.type });
            resolve(newFile);
          },
          error(err) {
            reject(err);
          },
        });
      });
    },
 },

总结

以上就是今天要讲的内容，本文仅仅简单介绍了compressorjs的使用，非常方便，并且自己可以根据文件size修改压缩质量quality。
下篇讲图片水印上传 ^_