html2canvas 生成图片并将图片上传为网络链接

安装依赖

npm install html2canvas

引入依赖

import html2canvas from 'html2canvas'

// 上传图片
    videoFile(file) {
      let params = new window.FormData()
      let fileOfBlob = new File([file], new Date().getTime() + '.jpg')
      params.append('file', fileOfBlob)
      uploadImgFile( params).then(res => {
        console.log('上传结果', res)
        if (res.success) {
        }
      })
    },
    // 生成海报
    drawImage(type) {
      // this.$Loading('加载中')
      var that = this
      var node = document.getElementsByClassName('shareImg' + type)[0]
      // console.log($('#shareImg'))
      html2canvas(node, {
        allowTaint: true,
        useCORS: true,
        logging: true,
        taintTest: false,
        scale: 6,
        width: document.getElementsByClassName('shareImg' + type)[0].clientWidth,
        height: document.getElementsByClassName('shareImg' + type)[0].clientHeight
      })
        .then(function (canvas) {
          // console.log('/', document.getElementsByClassName('fixed-img1'))
          document.getElementsByClassName('fixed-img' + type)[0].style.display = 'block'
          // console.log("元素",document.getElementsByClassName('fixed-img'+type)[0]);
          if (type == 1) {
            that.img1 = canvas.toDataURL('image/png')
          }
          if (type == 2) {
            that.img2 = canvas.toDataURL('image/png')
          }
          if (type == 3) {
            that.img3 = canvas.toDataURL('image/png')
          }
          if (type == 4) {
            that.img4 = canvas.toDataURL('image/png')
          }
          // that.img = canvas.toDataURL('image/png')
          // console.log("canvas.toDataURL",canvas.toDataURL('image/png'));
          console.log('图片已生成')
          that.codeBorder = false
          that.type = 1

          let dataURL = canvas.toDataURL('image/png')
          let pageBlob = that.dataURLtoBlob(dataURL)
          console.log('pageBlob', pageBlob)
          that.videoFile(pageBlob)
        })
        .catch(function (error) {
          console.log('错误信息')
          console.log(error)
        })
    },
    // 将base64转成blob 为了后续能上传
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(',')
      //注意base64的最后面中括号和引号是不转译的
      var _arr = arr[1].substring(0, arr[1].length - 2)
      var mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(_arr),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], {
        type: mime
      })
    },