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

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物品。“保存”按钮也会将它们指向一个新页面。这个新页面将在表格中显示用户数据，图像位于顶部。简单明了，我需要将图像保存在localStorage一旦按下“保存”按钮，然后将下一页上的图像从localStorage.我找到了一些解决方案，比如这把小提琴和这篇文章发表在Moz：/a Hack上。.虽然我仍然非常困惑这是如何工作的，我只需要一个简单的解决方案。基本上，我只需要通过getElementByID一旦按下“保存”按钮，然后处理并保存图像。

Answer 1

对于那些同样需要解决这个问题的人：

首先，我用getElementByID，并将图像保存为base 64。然后，我将base 64字符串保存为localStorage价值。

bannerImage = document.getElementById('bannerImg');imgData = getBase64Image(bannerImage);localStorage.setItem("imgData", imgData);

下面是将图像转换为base 64字符串的函数：

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

当页面加载时，我使用下面三行来获得base 64字符串localStorage，并将其应用于空白的图像。src我创造了：

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

在许多不同的浏览器和版本中进行了测试，它似乎运行得很好。

Answer 2

我在本地存储中编写了一个2，2kb的图像保存库JQueryImageCache用法：

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

Answer 3

可以将图像序列化为数据URI。这里有一个教程博客帖子..这将产生一个可以存储在本地存储中的字符串。然后在下一页中，使用数据uri作为图像的源。