canvas因为图片资源不在同一域名下而导致的跨域污染画布怎么处理

这篇文章将为大家详细讲解有关canvas因为图片资源不在同一域名下而导致的跨域污染画布怎么处理，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

解决办法：把所有图片都重定向同一个域名下：

let count = 0;let bgImg = document.creatElement('img');let qrImg = document.creatElement('img');bgImg.class="lazy" data-src = redirectUrl('x.png');qrImg.class="lazy" data-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.class="lazy" data-src = Canvas.toDataURL();    document.body.appendChild(nodeI)}

关于“canvas因为图片资源不在同一域名下而导致的跨域污染画布怎么处理”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。