正在開發(fā)的項目芥喇,因為使用了html2canvas的js,后端圖片請求get權(quán)限并沒有開發(fā)導(dǎo)致前端出現(xiàn)截圖空白失效情況
解決辦法
1.后端在阿里云服務(wù)器配置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為的是防止每次打開是頁面會往下滑動鞠柄。