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)
}

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