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

在 web 开发中，我们经常需要在不同的页面间传递数据。而 localStorage 作为浏览器提供的本地存储解决方案，成为了一种常用的传递数据的方式。

本文将介绍如何将图像保存到 localStorage，并在下一页显示。

1. 将图像转成 Base64 编码

将图像转成 Base64 编码可以方便的将其保存到 localStorage 中。使用 JavaScript 可以很容易地将图像转成 Base64 编码。

下面是一个将图片转成 Base64 编码的示例代码：

function getBase64FromImageUrl(imageUrl) {
    var img = new Image();
    img.setAttribute('crossOrigin', 'anonymous');
    img.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width =this.width;
        canvas.height =this.height;

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

        var dataURL = canvas.toDataURL("image/png");
        localStorage.setItem('imgBase64', dataURL);
    };
    img.src = imageUrl;
}

该函数接收一个图片地址，使用 img 标签加载图片并将其转成 Base64 编码。转换完成后，将其保存到 localStorage 中。

2. 在下一页显示图像

在下一页中，我们可以使用 Base64 编码在页面上显示图像。

下面是一个显示 Base64 图像的示例代码：

var imgBase64 = localStorage.getItem('imgBase64');
var img = new Image();
img.src = imgBase64;
document.body.appendChild(img);

该代码通过 localStorage 拿到保存的 Base64 图像，使用 img 标签将其显示在页面上。

3. 总结

本文介绍了如何将图像保存到 localStorage 并在下一页显示的方法，主要包括以下步骤：

• 将图像转成 Base64 编码
• 将 Base64 编码保存到 localStorage 中
• 在下一页中使用 Base64 编码显示图像

希望本文对大家有所帮助。