我正在研究能够在运行时将网页背景更改为动态生成的图像。我正在使用 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 接受动态创建的图像,而不是仅仅从域中加载图像?
最佳答案
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+')';
关于javascript - 使用javascript动态更改背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35166117/