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() 否 则有可能还是跨域
分类:
vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?