今天小编跟大家讲解下有关canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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(qrContent, qrx * scaleBy, qry * scaleBy, qrw * scaleBy, qrh * scaleBy); let nodeI = document.createElement("img"); nodeI.src = Canvas.toDataURL(); document.body.appendChild(nodeI)}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱蒂网。
来源：爱蒂网
