前端图片压缩：compressorjs压缩和canvas压缩

前端图片压缩

方法一：使用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 < 1024 * 1024) {
        //小于1M
        quality = 0.8;
      } else if (file.size < 5 * 1024 * 1024) {
        //小于5M
        quality = 0.5;
      } else if (file.size < 10 * 1024 * 1024) {
        //小于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);
          },
        });
      });
    },
 },

方法二：canvas压缩

async beforeRead(file) {
      let scale = 1;
      if (file.size < 1024 * 1024) {
        //小于1M
        scale = 0.8;
      } else if (file.size < 3 * 1024 * 1024) {
        //小于3M
        scale = 0.3;
      } else if (file.size < 5 * 1024 * 1024) {
        //小于5M
        scale = 0.2;
      } else {
        //大于5M
        scale = 0.1;
      }
      // scale = 0.2;
      console.log("压缩前字节hhh",file.size);
      // 压缩图片
      let imgFile = await this.blobToBase64(file, scale);
      console.log("压缩后字节",imgFile.size);

      return imgFile;
    },
    async blobToBase64(blob, scale) {
      const self = await this; // 绑定this
      const reader = await new FileReader(); // 实例化一个reader文件
      await reader.readAsDataURL(blob); // 添加二进制文件
      return new Promise(function(resolve, reject) {
        reader.onload = async function(event) {
          const base64 = await event.target.result; // 获取到它的base64文件
          let file = await self.compressImg(base64, scale);
          resolve(file);
        };
      });
    },
    async compressImg(base64, scale) {
      console.log(`执行缩放程序，scale=${scale}`);
      // 处理缩放，转换格式
      // 用canvas来压缩
      const img = new Image();
      img.src = base64;
      return new Promise(function(resolve, reject) {
        img.onload = async function() {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          canvas.setAttribute("width", this.width);
          canvas.setAttribute("height", this.height);
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          // 转成base64 文件
          base64 = canvas.toDataURL("image/jpeg", scale);
          const arr = base64.split(",");
          const mime = arr[0].match(/:(.*?);/)[1];
          const bytes = atob(arr[1]);
          const bytesLength = bytes.length;
          const u8arr = new Uint8Array(bytesLength);
          for (let i = 0; i < bytes.length; i++) {
            u8arr[i] = bytes.charCodeAt(i);
          }
          const file = await new File([u8arr], "filename", { type: mime });
          resolve(file);
        };
      });
    },

总结

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