html2canvas图片出现跨域问题,导致截图为空白
2020-12-22 本文已影响0人
Morbid_D
正在开发的项目,因为使用了html2canvas的js,后端图片请求get权限并没有开发导致前端出现截图空白失效情况
解决办法
1.后端在阿里云服务器配置oss中的get请求头,
2.前端使用html2canvas是需要注意配置
<img src="${res.data.posterUrl}" alt="" class="canboxbg" crossorigin="anonymous">
在img标签中添加crossorigin="anonymous"
html2canvas(document.querySelector("#canbox"),{allowTaint: true,useCORS: true,scrollX: 0,scrollY: 0,dpi: window.devicePixelRatio * 4,scale:2}).then(canvas => {
//进行图片保存
const dataUrl = canvas.toDataURL("image/png", 1.0);
$('.canboximg').attr("src",dataUrl)
})
在js中allowTaint: true,useCORS: true,必备
同时scrollX: 0,scrollY为的是防止每次打开是页面会往下滑动。