問題描述

當用戶點擊分享按鈕時，生成一張海報，可以保存圖片分享到朋友圈，用戶的圖片是存儲在阿里云的OSS,當海報完成后，執(zhí)行.canvas.toDataURL("image/png")時，出現(xiàn)index.html:28 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported的錯誤提示，這句話的翻譯是uncaught domexception:未能對“htmlcanvaselement”執(zhí)行“todataurl”：無法導出受污染的畫布。因為圖片跨域了，對畫布造成了污染。

解決方法

搜索相關問題，大多是為img設置crossOrigin屬性，實現(xiàn)圖片允許跨域，即：img.setAttribute("crossOrigin",'Anonymous')，我為圖片添加這個屬性后，圖片無法顯示了，報了一個錯誤:? Access to image at 'https://claystar.oss-cn-shenzhen.aliyuncs.com/pic/9dd6d55c5c7334d9448c4628e6ff69f6.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.? ? ? ??

通過和同事溝通討論得知，只需要為圖片添加一個時間戳即可。最后解決方式：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? img.src='http://www.xxxx.png' + '?time=' + new Date()