JS：通过链接保存时，ToDataURL不包含图像

Question

所以我试图做一个简单的照片拼贴创建者，并且通过画布生成布局，假设我要4张图像，每行两张，所以我要创建4张画布。在它们每个上，我都设置了drop事件，以便可以加载图像。 加载图像后，您可以保存“拼贴”，我要做的是获取我的身体背景图像，它是lorem ipsum随机图像，并将其绘制在最终的画布上作为背景。 我从图像中获得了数据，可以在新画布上看到背景，但是当我尝试保存它时，它根本不显示，这是我的代码的一部分：

    var imgBackground=new Image();
    var imgBgCanvas = new Image();

    imgBackground.onload = function() {
        //the getDataUrl creates one canvas and i draw the image on it then return the result with .toDataUrl("image/jpeg")
        imgBgCanvas.src=getDataUrl(imgBackground);
    }
    imgBgCanvas.onload= function() {
        //callback to load the image on my canvas, contextColaj is the context of the final canvas
        contextColaj.drawImage(imgBgCanvas,0,0,500,500);
    } 
    imgBackground.crossOrigin="Anonymous";   
    imgBackground.src=$("body").css("background-image").split('"')[1];

此后，我在此新画布上绘制其余画布，然后将数据返回到另一个调用save函数的函数。

//this is how i draw the canvases, c1 represents the first one but let's say we have four of them, they all show in the final canvas
contextColaj.drawImage(c1, 0, 0, 250, 250); 
//the return 
colaj.toDataURL("image/jpg",1.0);

那么为什么其他所有画布图像都起作用，它们却显示在保存的文件中，而背景图像却不显示？如果我将它们放在图像上并附加到主体上，它们就会显示出来，即使画布显示在主体上，即使画布上也有背景图像。