vue中压缩图片功能

vue中压缩图片功能

compress(inputFile, fileAttr) {
      const self = this;
      const reader = new FileReader();
      reader.readAsDataURL(inputFile);
      reader.onload = function(e) {
        //防止照片文件过大无法上传， 通过以下代码重新创建一个固定宽高的图片再上传
        var image = new Image();
        image.src = this.result;
        image.onload = function() {
          var expectWidth = this.naturalWidth;
          var expectHeight = this.naturalHeight;
          if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
            expectWidth = 800;
            expectHeight = (expectWidth * this.naturalHeight) / this.naturalWidth;
          } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
            expectHeight = 1200;
            expectWidth = (expectHeight * this.naturalWidth) / this.naturalHeight;
          }
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          canvas.width = expectWidth;
          canvas.height = expectHeight;
          ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
          var dataurl = canvas.toDataURL('image/jpeg', 0.8);
          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);
          }
          //修改上传文件名，重新整理进fileList
          self.fileList.push({
            file: new File([u8arr], fileAttr.fname, {
              type: mime
            }),
            attr: fileAttr
          });
        };
      };
    },