前言：在项目中，图片上传有涉及敏感信息的地方，我们通常需要给图片添加水印，但是当我们添加水印或者图片本身限制较大时，出于用户体验的角度，上传跟下载速度慢就成了必须解决的问题；本文为问题解决后做一个简单的记录，方便日后使用。

方式一：使用原生canvas实现

/**
   * @description: 图片压缩
   */
  compressImg(file) {
    let disposeFile = file;
    if (Object.prototype.toString.call(file) === '[object Blob]') {
      disposeFile = new File([file], file.name, { type: file.type });
    }
    const read = new FileReader(),
      _that = this;
    const fileSize = parseFloat(parseInt(disposeFile['size']) / 1024 / 1024).toFixed(2);
    // 小于1m不压缩
    if (fileSize < 1) return file;
    read.readAsDataURL(disposeFile);
    return new Promise((resolve, reject) => {
      try {
        read.onload = (e) => {
          const img = new Image();
          img.src = e.target.result;
          img.onload = function () {
            let w = Math.floor(this.width / 2),
              h = Math.floor(this.height / 2);
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            let base64;
            canvas.setAttribute('width', w);
            canvas.setAttribute('height', h);
            ctx.drawImage(this, 0, 0, w, h);
            console.log(w, h);
            if (fileSize < 1) {
              // 如果图片小于一兆 那么不执行压缩操作
              base64 = canvas.toDataURL(disposeFile['type'], 1);
            } else if (fileSize > 1 && fileSize < 2) {
              // 如果图片大于1M并且小于2M 那么压缩0.5
              base64 = canvas.toDataURL(disposeFile['type'], 0.5);
            } else {
              // 如果图片超过2m 那么压缩0.2
              base64 = canvas.toDataURL(disposeFile['type'], 0.2);
            }
            resolve(_that.dataURLtoFile(base64, disposeFile.name));
          };
        };
      } catch (error) {
        reject(disposeFile);
      }
    });
  },
  /**
   * @description: 将base64编码转回file文件
   */
  dataURLtoFile(dataurl, fileName) {
    var arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], fileName, {
      type: mime,
    });
  },

方式二：使用工具库实现

安装方式：npm i js-image-compressor 或 yarn add js-image-compressor

import ImageCompressor from 'js-image-compressor';

/**
   * @description: 图片压缩使用插件
   * @param { object } file
   * @return { object }
   */
  ImageCompressor(file) {
    return new Promise((reslove, reject) => {
      try {
        new ImageCompressor({
          file,
          quality: 0.15,
          success: (result) => {
            reslove(result);
          },
        });
      } catch (error) {
        reject(error);
      }
    });
  }

// 使用方式
try {
   const compressorFile = await utilsFun.ImageCompressor(file); 
   console.log(compressorFile,'压缩后的文件')
} catch (error) {
   // todo错误处理...
}