如何使用LocalStorage保存和显示图像？

使用 LocalStorage 保存和显示图像

问题：

如何将上传的图像保存到 localStorage，然后显示它在随后的

答案：

保存图片

1. 使用 getElementById('bannerImage' 获取图像元素).
2. 使用以下命令将图像转换为 Base64 字符串getBase64Image() 函数：

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,/, "");
}

3. 使用 localStorage.setItem("imgData", imgData) 将 Base64 字符串保存到 localStorage。

显示Image

1. 在下一页上，创建一个具有空白 src 属性的图像元素：。
2. 使用以下命令从 localStorage 获取 Base64 字符串localStorage.getItem('imgData').
3. 设置图片的src属性为Base64字符串：bannerImg.src =“data:image/png;base64,”dataImage.

以上是如何使用LocalStorage保存和显示图像？的详细内容。更多信息请关注PHP中文网其他相关文章！