html2canvas将dom元素转为图片并传给后台

首先

npm install html2canvas --save

然后在页面里面引入

import html2canvas from 'html2canvas'

html部分

 <div class="oouter-wrap">
            <img
              src="../../../../../assets/img/topStatus.png"
              alt=""
              class="bg-topStatus"
            />
            <div class="outer-wrap" id="img1" ref="screenshot">
              <!-- 背景层图片定位 -->
              <!-- :src="mediaForm.bgImg" -->
              <img
                :src="mediaForm.bgImg + '?' + new Date().getTime()"
                alt=""
                class="bg-img"
                v-show="mediaForm.bgImg !== ''"
                crossOrigin="anonymous"
              />

              <img
                :src="mediaForm.fwImg + '?' + new Date().getTime()"
                alt=""
                class="bg-topStatus1"
                v-show="mediaForm.fwImg !== ''"
                crossOrigin="anonymous"
              />
              <div class="inner-wrap">
                <div class="inner-wrap1">
                  <img
                    :src="productSLurl + '?' + new Date().getTime()"
                    alt=""
                    class="bg-img1"
                    v-show="productSLurl !== ''"
                    crossOrigin="anonymous"
                  />
                </div>
                <div class="inner-wrap2">
                  <div class="inner-name">
                    {{ culturalName }}
                  </div>
                  <div class="inner-details1">
                    <p class="details1-p1">收藏人</p>
                    <p class="details1-p1">收藏时间</p>
                  </div>
                  <div class="inner-details2">
                    <p class="details1-p1">张三</p>
                    <p class="details1-p1">{{ nowTime }}</p>
                  </div>
                  <div class="sy-img">
                    <img
                      :src="mediaForm.syImg + '?' + new Date().getTime()"
                      alt=""
                      class="syImg"
                      v-show="mediaForm.syImg !== ''"
                      crossOrigin="anonymous"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

js方法部分(这里的思路是先用html2canvas将dom转为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
      })
    },
    upYL(blob) {
      //以时间戳作为文件名 实时区分不同文件 按需求自己定义就好
      let filename = `${new Date().getTime()}.jpg`
      //转换canvas图片数据格式为formData
      let file2 = new File([blob], filename, { type: 'image/jpg' })
      let formData = new FormData()
      formData.append('file', file2)
      //将转换为formData的canvas图片 上传到服务器
      axios({
        headers: {
          'Blade-Auth': 'bearer ' + getToken()
        },
        url: '上传地址',
        data: formData,
        method: 'post'
      }).then((res) => {
        if (res.data.code == 200) {
          this.$emit('uploading')
          this.digitalColShowDTO.effectPic = res.data.data.link
          this.submitInfo()
        }
      })
    },
    async testYL1() {
      const opts = {
        useCORS: true
      }
      const ele = this.$refs.screenshot
      const canvas = await html2canvas(this.$refs.screenshot, opts)
      this.screenshotImage = canvas.toDataURL('image/jpg')

      var blobA1 = this.dataURLtoBlob(this.screenshotImage)
      this.upYL(blobA1)
    },