img截图跨域问题

480 阅读1分钟
// html
<div class="page-img-box imgBox"
     id="html2canvas"
     ref="html2canvas">
    <div class="el-image-box">
      <img :src="recognitionUrl+'?'+new Date().getTime()"
         crossOrigin="anonymous">
    </div>
</div>

// js
import html2canvas from 'html2canvas'
saveImage (divText, imgText) {
      let vueThis = this
      let canvasID = this.$refs[divText]
      // 截图
      html2canvas(canvasID, {
        // width: canvasID.clientWidth, // dom 原始宽度
        // height: canvasID.clientHeight,
        // scrollY: 0,
        // scrollX: 0,
        useCORS: true, // 【重要】开启跨域配置
        proxy: 'http://*.*.*.*:8909'
      }).then(canvas => {
        vueThis.urljietu = canvas.toDataURL('image/jpeg')

        // 上传, 返回识别图像名
        vueThis.UploadFileFn()
      })
    },
this.saveImage('html2canvas')
  1. 要添加crossOrigin="anonymous"属性
  2. new Date().getTime()加上时间戳, 不加会请求缓存里的图片