如何将图片保存到localStorage并在下一页显示？

将图片保存到 localStorage 并显示在下一页

您的要求是上传图片，将其保存到 localStorage，然后然后将其显示在后续页面上。以下是满足此需求的解决方案：

保存图像

使用您提到的 HTML 和 JavaScript 函数在页面上显示图像后，请按照以下附加操作操作单击“保存”按钮时的步骤：

1. 使用以下命令检索横幅图像的 HTML 元素document.getElementById('bannerImg').
2. 使用下面提供的 getBase64Image 函数将图像转换为 Base64 字符串。
3. 使用 localStorage.setItem("imgData" 将 Base64 字符串保存为 localStorage 项”, imgData).

将图像转换为 Base64 字符串的函数：

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

在下一页显示图像

在后续页面上，使用空 src 创建图像attribute:

<img src="">

然后，在页面加载后执行以下几行：

1. 使用 var dataImage = localStorage.getItem('imgData') 从 localStorage 检索 Base64 字符串。
2. 使用bannerImg =获取表格横幅图像的HTML元素document.getElementById('tableBanner').

3. 将图像的 src 属性设置为 Base64 字符串：

   bannerImg.src = "data:image/png;base64," + dataImage;

此方法允许您保存localStorage 中的图像并在下一页上显示它没有任何问题。

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