使用 javascript 动态更改背景图片

Question

我正在研究能够在运行时将网页背景更改为动态生成的图像。我正在使用 javascript 和 canvas 元素来创建背景，我将其存储在一个数组中，以便用户可以在它们之间切换；图片是 jpeg

// 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 替换为您从 toDataURL

获得的 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 加载到图像对象中。意思是你不需要做：

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 + ")";

使用 javascript 动态更改背景图片

Dynamically change background image using javascript

html

javascript

css

background-image