JS: ToDataURL не включает изображение при сохранении по ссылке - PullRequest
Новая
       45

JS: ToDataURL не включает изображение при сохранении по ссылке

1 голос
/ 10 марта 2019

Итак, я пытаюсь создать простой фотоколлаж и создаю макеты с помощью холстов, скажем, я хочу 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];

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

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

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

...