Блог

Итак, я пытаюсь создать простой фотоколлаж и создаю макеты с помощью холстов, допустим, мне нужно 4 изображения, по два в каждой строке, поэтому я создаю 4 холста. Для каждого из них у меня установлено событие удаления, чтобы я мог загружать изображения. После загрузки изображений вы можете сохранить «коллаж», что я хочу сделать, это получить фоновое изображение моего тела, которое является случайным изображением 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];
  

После этого я рисую остальные холсты на этом новом холсте, затем я возвращаю данные другой функции, которая вызывает функцию сохранения.

 //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);
  

Итак, почему все остальные изображения canvas работают, они отображаются в сохраненном файле, а фоновое изображение — нет? Если я помещаю их на изображение и добавляю к тексту, они отображаются, даже на холсте, если он показан в теле, есть фоновое изображение.