All geek questions in one place

Setting css background for image in local storage

I want to put an image that is in base64 format and which is stored in local storage in the ImgStorage key, like this in css background:

 data:image/png;base64,iVBORw0KGgoAAAANS......

So far I have tried two approaches:

1) loading from the repository and adding to the css tag:

 var TheImage = localStorage.getItem('ImgStorage'); $('body').css({ 'background-image': "url(" + TheImage) });

2) recreation of the canvas from the storage data:

 var Canvas = document.createElement("canvas"); Canvas.width = 50; Canvas.height = 50; var Context = Canvas.getContext("2d"); var TheImage = localStorage.getItem('ImgStorage'); Context.drawImage(TheImage, 0, 0); Canvas.toDataURL("image/png"); $('body').css({ 'background-image': "url(" + Canvas.toDataURL("image/png") + ")" });

I browsed the web, but all the examples say that the image in the repository is displayed inside the <img> .

Has anyone solved this for css background?

As an aside, in terms of performance, if you base64 encode your images, you can send them to the body of an HTML page without any additional requests. For example, if you need to upload 20 images for your user interface, then 20 less requests. And, if you save each image in local storage, you only need to upload them once. It doesn’t work for older browsers, so it works only for 80% of browsers, but still ... something that needs to be considered, because time is on your side in terms of browser evolution.

+4
source share
1 answer

ok, this is for those who come to this page after bouncing: I GOT THE WORK !!!!

Using parameter 1), you simply write this:

 var TheImage = localStorage.getItem('ImgStorage'); $('body').css({ 'background-image': "url(" + TheImage + ")" });

In other words, you don’t have to waste time re-creating the canvas, as I tried with option 2), just go straight ahead.

+4
source

Source: https://habr.com/ru/post/1397227/

More articles:


All Articles