如何将图片保存到LocalStorage并在新页面显示？

将图像保存到 LocalStorage 并在新页面上显示

使用 Web 表单时，通常需要处理图像上传和显示存储它们以供以后显示。本文提供了上传图像、保存到 localStorage 以及在下一页显示图像的全面解决方案。

上传和显示图像

上传和显示要在当前页面上显示图像，请使用类型属性设置为“file”的 HTML 输入字段以及调用 readURL 函数的 onchange 事件处理程序。该函数应使用 FileReader API 读取选定的图像文件，并使用图像元素的 src 属性将其显示在页面上。

将图像保存到 LocalStorage

用户填写表单的其余部分并单击“保存”按钮后，将所有表单输入（包括图像）保存为 localStorage 字符串。要保存图像，请使用 getElementById 函数获取页面上的图像元素，使用响应中提供的函数将其转换为 Base64 字符串，并将该字符串存储为 localStorage 值。

在新页面上显示图像

在下一页上，创建一个具有空白 src 属性的图像。页面加载时，使用 localStorage.getItem 函数从 localStorage 中检索图像的 Base64 字符串，并将其应用到图像的 src 属性中，使用 data:image/png;base64 前缀来指示图像数据格式。

以上是如何将图片保存到LocalStorage并在新页面显示？的详细内容。更多信息请关注PHP中文网其他相关文章！