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

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

首先，我使用获取图像

getElementByID

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;

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