canvas因為圖片資源不在同一網域下而導致的跨域污染畫布的解決方法

我們要繪製一張圖片，內容包含一張背景圖和一個動態產生的二維碼，前提是背景圖是專案本身的靜態資源，二維碼是服務端動態產生的，二者不在同一網域下。

解決方法：把所有圖片重定向同一個網域下：

 let count = 0;let bgImg = document.creatElement('img');let qrImg = document.creatElement('img');bgImg.src = redirectUrl('x.png');qrImg.src = redirectUrl('y .png');[bgImg, qrImg].forEach((e) => { e.onload = () => { count ++; if (count === 2) { drawerImg(bgImg, qrImg); } }})function redirectUrl (url) { return 'https://xxx/view? fileUrl=' + encodeURIComponent(url);}function drawerImg (imgContent, qrContent, scaleBy = 2) { let {bgImgW, bgImgH} = {375, 800}; let {qrx, qry, qrw, qrh} = {20, 700, 50, 50}; let Canvas = document.createElement('canvas'); let ctx = Canvas .getContext(2d); Canvas.width = bgImgW * scaleBy; Canvas.height= bgImgH * scaleBy; ctx.drawImage(imgContent, 0, 0, bgImgW * scaleBy, bgImgH * scaleBy); ctx.drawImage(qrContrContrContrContr. scaleBy); let nodeI = document.createElement(img); nodeI.src = Canvas.toDataURL(); document.body.appendChild(nodeI)}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。