将html2canvas生成截图上传到服务器_html2canvas截图上传服务器

// html2canvas(Dom元素)
html2canvas(this.$refs.project).then(canvas => {

        let base64 = canvas.toDataURL("image/png")         // 先转化为base64

        let bstr = atob(base64.split(',')[1]);    // atob是将base64编码解码，去掉data:image/png;base64,部分
          let n = bstr.length;
          let u8arr = new Uint8Array(n);

          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }

          let file2 = new File([u8arr], 'a.jpg', {type: 'image/jpg'})


          var formData = new FormData();
          formData.append("file", file2);

          _this.$axios.post( _this.$store.state.path + 'configplatform2-upload-manage/UploadController/uploadFile?uniqueid='+ _this.projectInfo.info.uniqueid,formData)
            .then((res) => {
              console.log(res)
            })
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

截图跨域问题思路：

图片是一直跨域，截图时将图片转化为base64格式就没问题了