Question

我希望在css背景中添加一个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％的浏览器，但仍然需要考虑因为浏览器演变方面的时间在你身边。

Answer 1

好的，这是针对那些在弹跳后来到这个页面的人：我认真工作!!!!

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

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

换句话说，你不需要浪费时间来重新创建画布，就像我试图选择2）一样，只需直接进行。

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

1 个答案: