如何在页面加载时使用 localStorage 保存和显示图像？

跨页面加载使用 localStorage 保存和显示图像

问题：

用户可以上传图像，填写表单输入，将表单保存到 localStorage，然后继续新页面。目标是将上传的图像保存到 localStorage 并在下一页显示。

解决方案：

1. 抓取图片：

   • 使用getElementById检索包含图像的 HTML 元素。

2. 转换为 Base64：

   • 定义一个函数将图像转换为使用 canvas 和的 Base64 字符串表示toDataURL.

3. 保存到 localStorage:

   • 使用带有唯一值的 setItem 将 Base64 字符串作为值存储在 localStorage 中键。

4. 在下一页：

   • 创建一个具有空白 src 属性的图像元素。
   • 使用以下命令从 localStorage 中检索 Base64 字符串getItem。
   • 更新图像的 src 属性以包含 Base64 字符串。

5. 示例代码：

   • 保存到本地存储：

     const imgData = getBase64Image(document.getElementById('bannerImg'));
     localStorage.setItem('imgData', imgData);

   • 显示在下一页：

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

此解决方案允许您将上传的图像保存到 localStorage 作为Base64 字符串并通过检索该字符串并将其设置为图像的 src 属性将其显示在不同的页面上。

以上是如何在页面加载时使用 localStorage 保存和显示图像？的详细内容。更多信息请关注PHP中文网其他相关文章！