Динамическое изменение фонового изображения с помощью javascript

Question

Я ищу возможность изменить фон веб-страницы на динамически генерируемое изображение во время выполнения. Я использую javascript и элемент canvas для создания фона, который я храню в массиве, чтобы пользователь мог переключаться между ними; образы JPEGs

// canvas computations snipped 

var img = c.toDataURL("image/jpeg"); 
this.modifiedanimationarray[0] = new Image(); 
this.modifiedanimationarray[0].src = img; 

Однако я заметил, что Javascript манипулировать фон выглядит следующим образом:

document.body.style.backgroundImage = "url('whatever.jpg')"; 

хочет изображение из URL, который создается без динамически. Есть ли способ заставить document.body.style.backgroundImage принять образ, созданный «на лету», а не просто погрузить его из домена?

Answer 1

toDataURL предоставит вам URL-адрес данных, который может использоваться вместо обычного URL-адреса. Так что вместо того, чтобы делать сказать

document.body.style.backgroundImage = 'url(someimage.jpg)'; 

просто заменить URL, в этом случае someimage.jpg с URL вы получили от toDataURL

document.body.style.backgroundImage = 'url('+canvas.toDataURL("image/jpeg")+')'; 

Demo

function getBG(){ 
 
    var canvas = document.getElementById('bgcanvas'), 
 
     context = canvas.getContext('2d'), 
 
     cX = canvas.width/2, 
 
     cY = canvas.height/2; 
 
     context.beginPath(); 
 
     context.arc(cX, cY, 70, 0, 2 * Math.PI, false); 
 
     context.fillStyle = 'green'; 
 
     context.fill(); 
 
     context.stroke(); 
 
    return canvas.toDataURL("image/jpeg"); 
 
} 
 

 
document.body.style.backgroundImage = 'url('+getBG()+')';

canvas { 
 
    display:none; 
 
}

<canvas id="bgcanvas" width="200" height="200"></canvas>

Также обратите внимание, что вам не нужно загружать URL-адрес данных в объект изображения перед его использованием. Значение вам не нужно делать:

var img = c.toDataURL("image/jpeg"); 
this.modifiedanimationarray[0] = new Image(); 
this.modifiedanimationarray[0].src = img; 

Вы бы просто сделать

var img = c.toDataURL("image/jpeg"); 
this.modifiedanimationarray[0] = img; 
document.body.style.backgroundImage = 'url('+this.modifiedanimationarray[0]+')'; 
//or just 
document.body.style.backgroundImage = 'url('+img+')'; 

Answer 2

Вы можете использовать результат toDataURL как реальный URL.

var img = c.toDataURL("image/jpeg"); 
document.body.style.backgroundImage = "url(" + img + ")";