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

Posted 2023-03-05

【中文标题】将 css 背景设置为本地存储中的图像

【英文标题】：setting css background to an image in local storage

【发布时间】：2012-03-09 19:31:30

【问题描述】：

我希望将 base64 格式的图像存储在本地存储中的密钥 ImgStorage 中，如下所示：

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】：

好的，这是给那些在蹦蹦跳跳后来到这个页面的人的：I GOT IT TO WORK!!!!

使用选项 1)，您只需这样写：

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

换句话说，您无需像我尝试使用选项 2) 那样浪费时间重新创建画布，直接​​进行即可。