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

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&nbsp;=&nbsp;document.getElementById('bannerImg');imgData&nbsp;=&nbsp;getBase64Image(bannerImage);localStorage.setItem("imgData",&nbsp;imgData);下面是将图像转换为base 64字符串的函数：function&nbsp;getBase64Image(img)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;canvas&nbsp;=&nbsp;document.createElement("canvas"); &nbsp;&nbsp;&nbsp;&nbsp;canvas.width&nbsp;=&nbsp;img.width; &nbsp;&nbsp;&nbsp;&nbsp;canvas.height&nbsp;=&nbsp;img.height; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ctx&nbsp;=&nbsp;canvas.getContext("2d"); &nbsp;&nbsp;&nbsp;&nbsp;ctx.drawImage(img,&nbsp;0,&nbsp;0); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;dataURL&nbsp;=&nbsp;canvas.toDataURL("image/png"); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;dataURL.replace(/^data:image\/(png|jpg);base64,/,&nbsp;"");}然后，在我的下一页上，我创建了一个空白的图像。src就像这样：<img&nbsp;src=""&nbsp;id="tableBanner"&nbsp;/>当页面加载时，我使用下面三行来获得base 64字符串localStorage，并将其应用于空白的图像。src我创造了：var&nbsp;dataImage&nbsp;=&nbsp;localStorage.getItem('imgData');bannerImg&nbsp;=&nbsp;document.getElementById('tableBanner');bannerImg.src&nbsp;=&nbsp;"data:image/png;base64,"&nbsp;+&nbsp;dataImage;在许多不同的浏览器和版本中进行了测试，它似乎运行得很好。

Answer 2

我在本地存储中编写了一个2，2kb的图像保存库JQueryImageCache用法：<img&nbsp;data-src="path/to/image"><script> &nbsp;&nbsp;&nbsp;&nbsp;$('img').imageCaching();</script>

Answer 3

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