html2canvas把dom元素转换成图片时跨域,crossorigin="anonymous"导致跨域问题

1.前端使用html2canvas是需要注意配置  crossorigin="anonymous"

<div class="c-l-c" ref="lz-image2">
    <img class="image" :src="dataObj.matchFile.fileUrl +'?'+ new Date().getTime()" crossorigin="anonymous"></img>
</div>

2.使用  import html2canvas from 'html2canvas';时跨域需要配置  useCORS: true

html2canvas(this.$refs.lz-image2,{
      scale: 2,
      logging: true, 
      taintTest: true, //在渲染前测试图片
      useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用)
}).then(canvas=> {
      let _imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
      this.picture.showViewer=true
      this.picture.urlList=[{
           fileUrl:_imgUrl
      }]
});

3.这里主要需要在img src 的 url上拼接上 new Date().getTime()  否 则有可能还是跨域

posted @ 2022-09-19 15:36  奔跑吧前端(李钊)  阅读(1514)  评论(0编辑  收藏  举报