小编典典

如何将映像保存到localStorage并将其显示在下一页上?

javascript

因此,基本上,我需要上传单个图像,将其保存到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

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


阅读 450

收藏
2020-04-25

共1个答案

小编典典

对于也需要解决此问题的人:

首先,我使用获取图像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" />

直接在页面加载时,我使用下面的三行从中获取Base64字符串localStorage,并将其应用于具有src我创建的空白的图像:

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

在许多不同的浏览器和版本中对其进行了测试,并且看起来运行良好。

2020-04-25