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

所以，基本上，我需要上传单个图像，将其保存到 localStorage，然后将其显示在下一页上。

目前，我上传了 HTML 文件：

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

其中使用这个函数来在页面上显示图像

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

图像立即显示在页面上供用户查看。然后他们被要求填写表格的其余部分。这部分工作完美。

表格填写完毕后，他们会按下“保存”按钮。按下此按钮后，我将所有表单输入保存为localStorage字符串。我需要一种方法将图像另存为localStorage item.

保存按钮还将引导他们进入新页面。这个新页面将在表格中显示用户数据，图像位于顶部。

如此简单明了，我需要将图像保存在localStorage一旦按下“保存”按钮，然后从下一页借出图像localStorage.

我找到了一些解决方案，例如这把小提琴 and 这篇文章位于 moz://a HACKS.

尽管我仍然对其工作原理感到非常困惑，而且我只需要一个简单的解决方案。基本上，我只需要通过找到图像getElementByID一旦按下“保存”按钮，然后处理并保存图像。

对于也需要解决这个问题的人：

首先，我用以下方法抓取图像getElementByID，并将图像保存为 Base64。然后我将 Base64 字符串保存为我的localStorage value.

bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", 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像这样：

<img src="" id="tableBanner" />

当页面加载时，我直接使用接下来的三行来获取 Base64 字符串localStorage，并将其应用到有空白的图像上src我创建：

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

在很多不同的浏览器和版本中测试了它，它似乎工作得很好。