标签：javascript css background-image html

我正在考虑能够在运行时将网页的背景更改为动态生成的图像.我正在使用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+')';

标签：javascript,css,background-image,html
来源： https://codeday.me/bug/20190608/1201540.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。