将css背景设置为本地存储中的图像 [英] setting css background to an image in local storage

问题描述

我想把一个base64格式的图像存储在本地存储的键 ImgStorage 像这样在css后台：

  data：image / png; base64，iVBORw0KGgoAAAANS ...... 
  

到目前为止，我尝试了两种方法：

1）从存储加载css tag：

  var TheImage = localStorage.getItem（'ImgStorage'）; 
 $（'body'）。css（{'background-image'：url（+ TheImage）}）; 
  

2）从存储数据重新创建画布：

  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）+）}）; 
  

我已经在网上看过，但是所有的例子都谈到在存储中渲染图像

另外，在性能方面，如果您对图片进行base64编码，则可以在HTML页面的正文中发送它们，而无需任何其他请求。因此，例如，如果您需要为您的UI加载20张图片，则请求数少于20张。并且，如果您将每个映像存储在本地存储中，那么您只需要加载它们一次。不适用于旧版浏览器，因此它只适用于80％的浏览器，但仍然需要考虑的因素，因为时间在浏览器演变方面。

解决方案

确定，这是为那些谁来到这个页面后弹跳：我要工作!!!!

使用选项1），你只需写下：

  var TheImage = localStorage.getItem（'ImgStorage'）; 
 $（'body'）。css（{'background-image'：url（+ TheImage +）}）; 
  

换句话说，你不需要浪费你的时间重新创建画布，与选项2），只需直接。

I'm looking to put an image that's in base64 format and that's stored in the local storage in the key ImgStorage like this in the css background:

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

So far, I've tried two approaches:

1) loading from storage and put in css tag:

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

2) recreating 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've looked around on the web but all examples talk about getting an image in storage to render inside an <img> tag.

Has anyone solved this for css background?

As an aside, in terms of performance, if you base64 encode your images, you can send them in the body of the HTML page without any additional requests. So for example, if you need to load 20 images for your UI, that's 20 less requests. And, if you store each image in the local storage, then you only need to load them once. Doesn't work for older browsers so it only works for 80% of browsers but still.... something to consider because time's on your side in terms of browser evolution.

解决方案

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

Using option 1), you simply write this:

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

In other words, you don't need to waste your time reccreating the canvas like I was trying to with option 2), just go direct.

这篇关于将css背景设置为本地存储中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！