Dynamically change background image using javascript

Question

I'm looking into being able to change the background of a webpage to a dynamically generated image at runtime. I'm using javascript and the canvas element to create the backgrounds, which I'm storing in an array so that the user can toggle between them; the images are jpegs

// canvas computations snipped

var img = c.toDataURL("image/jpeg");
this.modifiedanimationarray[0] = new Image();
this.modifiedanimationarray[0].src = img;

However, I have noticed that the javascript to manipulate the background is as follows:

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

it wants an image from a url, that is created non-dynamically. Is there any way to force the document.body.style.backgroundImage to accept an image created on-the-fly rather than just loading one off a domain?

I mean generated in response to something the user does to the webpage, rather than extract an image from a website. So, the on-the-fly image is created as and when needed. — EventHorizon
– EventHorizon, Commented Feb 3, 2016 at 0:08
Yes it could be done. check my updated answer. See this in action on my answer below — Peyman Mohamadpour
– Peyman Mohamadpour, Commented Feb 3, 2016 at 0:24

Patrick Evans · Accepted Answer · 2016-02-03 00:34:42Z

5

toDataURL will give you a data url which can be used in place of a regular url. So instead of doing say

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

just replace the url, in this case someimage.jpg, with the url you got from toDataURL

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

Demo

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>

Also note you do not need to load a data url into an image object before using it. Meaning you do not need to do:

var img = c.toDataURL("image/jpeg");
this.modifiedanimationarray[0] = new Image();
this.modifiedanimationarray[0].src = img;

You would just do

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

edited Feb 3, 2016 at 0:34

answered Feb 3, 2016 at 0:09

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EventHorizon Over a year ago

Thanks, this seems to be just what I want. Shame I can't get the rest of the code to work!

NineBerry · Accepted Answer · 2016-02-03 00:11:43Z

1

You can use the result of toDataURL like a real URL.

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

answered Feb 3, 2016 at 0:11

NineBerry

28.8k4 gold badges68 silver badges104 bronze badges

3 Comments

EventHorizon Over a year ago

So, something like this: this.modifiedanimationarray[0] = new Image(); this.modifiedanimationarray[0].src = img; this.modifiedanimationarray[1] = new Image(); this.modifiedanimationarray[1].src = img; document.body.style.backgroundImage = "url(" + this.modifiedanimationarray[0] + ")"; and: document.body.style.backgroundImage = "url(" + this.modifiedanimationarray[1] + ")";

EventHorizon Over a year ago

One thing that concerns me is the use of the "src" tag, when assigning an array element to "hold" the created image; do I use the same tag when assigning the backgroundimage eg document.body.style.backgroundImage = "url(" + this.modifiedanimationarray[0].src + ")"; or not? I am thinking you don't need to (??)

Patrick Evans Over a year ago

@EventHorizon, if this.modifiedanimationarray[0].src is where you are storing the data url you are getting from toDataURL then yes that is how you would use it. Note though you do not need to use an image object to store it/load it, you just use it.

Collectives™ on Stack Overflow

Dynamically change background image using javascript

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related