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

Question

所以，基本上，我需要上传单个图像，将其保存到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项。

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

所以简单明了，我需要在按下“保存”按钮后将图像保存在localstorage中，然后在下一页从localstorage中借用图像。

我在moz：//a hacks上找到了一些解决方案，比如这把小提琴和这篇文章。

虽然我仍然非常困惑这是如何工作的，我只需要一个简单的解决方案。基本上，一旦按下“保存”按钮，我只需要通过getElementByID找到图像，然后处理并保存图像。

Answer 1

我在localStorage JQueryImageCaching中编写了一个保存图像的2.2KB库：

<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>

Answer 2

谁也需要解决这个问题：

首先，我使用getElementByID获取图像，并将图像保存为Base64。然后将Base64字符串保存为localstorage值。

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" />

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

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

在相当多的不同浏览器和版本中测试了它，看起来工作得相当不错。