[英]Change background-image of a class dynamically on a date using javascript/Jquery?
[英]Dynamically change background image using javascript
我正在考虑能够在运行时将网页的背景更改为动态生成的图像。 我正在使用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接受动态创建的图像而不是仅仅从域中加载一个?
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+')';
您可以像使用真实URL一样使用toDataURL的结果。
var img = c.toDataURL("image/jpeg");
document.body.style.backgroundImage = "url(" + img + ")";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.