save css computed background image as a variable or object for later use

Question

Is it possible to get the image data from a computed style and save it in a variable or object for later use ?

For example in HTML web page I load the background from an image with CSS:

document.body.style.background = "url(...path/image.php) #FFF";

Now I need to save the image which was loaded in document.body.style.background because i will use it later. I would like to save the image in localStorage as DATA URI and access it even after i restart the browser.

I cannot use AJAX or send request to server. I have to copy/save somehow from webpage which was loaded. But I'm not sure if this is possible and if yes , how

I cannot use the image URL because the url generates random images everytime, it something like http://url.php ... and not a standard image url

Maybe using HTML5 Canvas is possible to copy from document.body ? the webpage is populated with other child elements

This [SO Question](http://stackoverflow.com/questions/19183180/how-to-save-an-image-to-localstorage-and-display-it-on-the-next-page) may help. — Anthony, Apr 01 '16 at 19:14

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

Create a canvas > object - load your generated image into the canvas, then use canvas.toDataURL to grab the base64 representation of the image. You can then store that base64 string as a variable and reload it whenever you want.

Detailed example in this SO answer: How to convert image into base64 string using javascript

edited May 23 '17 at 12:14

Community

1
1

answered Apr 01 '16 at 20:14

Korgrue

3,430
1
13
20

But the problem is that the image loads only once and it is set as background image of the web page, document.body.style.background – Apr 01 '16 at 22:13
Yes, I understand that. Before you load it into the background - process it as described above and use the base64 value as your image background. You can store that value as a variable and inject it into your css whenever you need to reuse the image. You dont even need to have the canvas object displayed - you are only using it in order to output the base64 string from the rendered image. – Korgrue Apr 04 '16 at 15:10

score 0 · Answer 2 · edited May 23 '17 at 12:22

There is no way to take a real screen-shot of any element through canvas. _{(at least not in WebAPI, in some browsers, extensions are allowed to do so).}

You will have to create a new Image object, set it's src to the one of the background-image, and then only be able to draw it on the canvas.

But if the server answers with a no-cache, then the Image will just load an other image than the one set as background.

So you will have to make things in the other way :

First load the image through an Image Object.
Then draw this image to a canvas and get its dataURI version by calling canvas.toDataURL().
Finally, set your element's background to this dataURI you just extracted.

// first load your image from the server once, into an Image object
var img = new Image();

// wait for the image has loaded
img.onload = function(){
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.drawImage(this, 0,0);
  // since I'm receiving photos, jpeg is better
  var dataURL = canvas.toDataURL('image/jpeg');
  // if we could use local storage in snippets...
  //localStorage.setItem('background-image', dataURL);
  // since we can't
  saved = dataURL;
  document.body.style.backgroundImage = 'url('+dataURL+')';
}

// I'm loading it from an external server
img.crossOrigin = 'anonymous';
img.src = 'http://lorempixel.com/200/200/?'+Math.random();

// since we can't use local storage in sand-boxed iframe
// we will use a global in this snippet
var saved;

button.onclick = function(){
  // if we could use localStorage
  // var saved = localStorage.getItem('background-image');
  document.getElementById('result').style.backgroundImage = 'url('+saved+')';
  };

div{width: 200px; height: 200px; border: 1px solid; background-color: white;}
body{width: 100vw; height: 100vh; margin: 0;}

<button id="button">set the div's background to the saved one</button>
<div id="result"></div>

Note that localStorage is limited so depending on your graphics, you may want to use the image/jpeg compression type of the toDataURL() method.

Also, you'll be limited by cross-origin policies, if the php page is not on the same domain, make sure it is correctly configured to accept cross-origin requests and set you Image object's crossOrigin property to "anonymous".

Ps : You could also avoid the canvas part by using an XMLHttpRequest and a FileReader(), wich will involve different cross-origin restrictions.

Good answer, i thought about something similar, the difficult part is that it requires many changes for me, i thought that maybe exists some ways to achieve this... — , Apr 02 '16 at 20:01
@ManY nope, no other front end way if the caching is disabled. — Kaiido, Apr 03 '16 at 01:33

save css computed background image as a variable or object for later use

2 Answers2