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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！