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() 否 则有可能还是跨域