如何将图像保存到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项目.

保存按钮也会将它们指向新页面.此新页面将在表格中显示用户数据,图像位于顶部.

如此简单明了,我需要在localStorage按下"保存"按钮后保存图像,然后将图像借给下一页localStorage.

我在moz:// a HACKS找到了一些解决方案,比如这个小提琴和这篇文章.

虽然我对它的工作方式仍然非常困惑,但我只需要一个简单的解决方案.基本上,我只需要在getElementByID按下"保存"按钮后找到图像,然后处理并保存图像.

Answer 1

对于那些也需要这个问题的人来说:

首先,我抓取我的图像getElementByID并将图像保存为Base64.然后我将Base64字符串保存为我的localStorage值.

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

这是将图像转换为Base64 sting的函数:

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;

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

Answer 2

我在localStorage JQueryImageCaching中编写了一个2.2kb的保存图像库, 用法:

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

Answer 3

您可以将图像序列化为数据URI.这篇博客文章中有一个教程.这将生成一个可以存储在本地存储中的字符串.然后在下一页上,使用数据uri作为图像的来源.

Answer 4

我结合使用了已接受的答案、James H. Kelly 的评论和FileReader object。

我首先使用以下对象将上传的图像存储为 Base64 字符串FileReader：

// get user's uploaded image
const imgPath = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();

reader.addEventListener("load", function () {
    // convert image file to base64 string and save to localStorage
    localStorage.setItem("image", reader.result);
}, false);

if (imgPath) {
    reader.readAsDataURL(imgPath);
}

然后，要从 localStorage 读回图像，我只需执行以下操作：

let img = document.getElementById('image');
img.src = localStorage.getItem('image');