canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法

我们要 绘制 一张图片，内容包括一张背景图和一个动态生成的二维码，前提是背景图是项目本身的静态资 源 ，二维码是服务端动态生成的，二者不在同一域名下。

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

let count = 0;
let bg img  = document.creatElement('img');
let qrImg = document.creatElement('img');
bgImg.src =  red irectUrl('x.png');
qrImg.src = redirectUrl('y.png');
[bgImg, qrImg].for each ((e) => {
    e.onload = () => {
        count ++;
        if (count  ===  2) {
            drawerImg(bgImg, qrImg);  
        }
    }
})
function redirectUrl (url) {
    return 'https://xxx/view?fileUrl=' + encodeURI component (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.h ei ght= 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.ap PE ndChild(nodeI)
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

总结

以上是 为你收集整理的 canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法 全部内容，希望文章能够帮你解决 canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法的详细内容...