将css背景设置为本地存储中的图像

setting css background to an image in local storage

本文关键字：存储 图像 css 背景 设置      更新时间：2023-09-26

我想把一个base64格式的图像放在密钥ImgStorage中的本地存储器中，就像下面这样放在css背景中：

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

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

1）从存储加载并放入css标签：

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") + ")" });

我在网上浏览过，但所有的例子都谈到了在存储中获取图像以在<img>标记中渲染。

有人为css背景解决了这个问题吗

顺便说一句，就性能而言，如果你对图像进行base64编码，你可以在HTML页面的正文中发送它们，而不需要任何额外的请求。因此，例如，如果您需要为UI加载20个图像，那么请求就会减少20个。而且，如果将每个映像存储在本地存储器中，则只需要加载一次即可。不适用于旧浏览器，所以它只适用于80%的浏览器，但仍然。。。。一些需要考虑的事情，因为就浏览器的发展而言，时间是站在你这边的。

好吧，这是给那些在浏览后来到这个页面的人的：我成功了！！！！

使用选项1），您只需编写以下内容：

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

换句话说，你不需要像我在选项2）中尝试的那样浪费时间重新创建画布，只需直接操作即可。

相关文章：