基于antd组件前端实现图片压缩

前端实现图片压缩的主要思路是：将图片利用canvas.drawImage进行绘制，绘制后调用toBlob方法转化为blob对象并压缩，最后通过new File()将blob对象转化为文件对象并上传；

由于项目是使用antd组件进行开发的，图片上传使用的是Upload组件上传的，所以图片压缩放在了beforeUplaod方法中进行的。代码如下：

<Upload
  accept='image/*'
  action={uploadPicUrl}
  beforeUpload={this.beforeUpload.bind(this)}
  onChange={this.handlePictureUpload.bind(this)}
>
  上传
</Upload>

/**
   * 
   * @param {Object} file 当前上传的文件对象
   * @param {*} fileList 已经上传的文件列表
   */
  beforeUpload(file, fileList) {
    return new Promise(resolve => {
      // 图片压缩
      let reader = new FileReader(), img = new Image();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        img.src = e.target.result;
      }

      img.onload = function () {
        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');

        let originWidth = this.width;
        let originHeight = this.height;

        canvas.width = originWidth;
        canvas.height = originHeight;

        context.clearRect(0, 0, originWidth, originHeight);
        context.drawImage(img, 0, 0, originWidth, originHeight);

        canvas.toBlob((blob) => {
          let imgFile = new File([blob], file.name, {type: file.type}); // 将blob对象转化为图片文件
          resolve(imgFile);
        }, file.type, 0.2); // file压缩的图片类型
      }
    })
  }