如何在 localStorage 中存储和检索图像以用于 Web 显示？

在 localStorage 中存储和检索图像以用于 Web 显示

问题：

你怎么能上传图片，保存到localStorage，后续显示页？

解决方案：

将图像保存到本地存储：

1. 抓取上传的图像getElementById('bannerImg').

2. 使用 getBase64Image() 函数将图像转换为 Base64 字符串：

   var imgData = getBase64Image(bannerImage);

3. 将 Base64 字符串另存为本地存储value:

   localStorage.setItem("imgData", imgData);

从本地存储中检索图像并显示在下一页上：

1. 在新页面上，创建一个带有空白的图像元素src:

   <img  src="" alt="如何在 localStorage 中存储和检索图像以用于 Web 显示？" >

2. 页面加载时，从 localStorage 检索 Base64 字符串：

   var dataImage = localStorage.getItem('imgData');

3. 将 Base64 字符串应用于图像的源代码属性：

   bannerImg = document.getElementById('tableBanner');
   bannerImg.src = "data:image/png;base64," + dataImage;

其他注意事项：

• getBase64Image() 函数默认将图像转换为 PNG 格式。如果需要，您可以指定不同的格式。
• 此解决方案与大多数主要浏览器兼容。但是，某些旧版浏览器可能不支持 localStorage。

以上是如何在 localStorage 中存储和检索图像以用于 Web 显示？的详细内容。更多信息请关注PHP中文网其他相关文章！