使用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')";

它想要一個來自網址的圖片，這是非動態創建的。 有沒有辦法強制document.body.style.backgroundImage接受動態創建的圖像而不是僅僅從域中加載一個？

Answer 1

toDataURL將為您提供一個數據網址，可用於代替常規網址。 所以不要說

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

只需用你從toDataURL獲取的url替換url，在本例中為someimage.jpg

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

演示

 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之前，無需將數據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

您可以像使用真實URL一樣使用toDataURL的結果。

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