如何使用LocalStorage儲存和顯示影像？

使用 LocalStorage 儲存並顯示影像

問題：

如何將上傳的影像儲存到localStorage，然後顯示它在隨後的

答案：

儲存圖片

1. 儲存圖片

儲存圖片

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. 使用圖片'取得圖像元素).

使用以下命令將圖像轉換為Base64 字串getBase64Image() 函數：

1. 使用localStorage.setItem("imgData", imgData) 將Base64 字串儲存到localStorage。
3. 顯示Image

在下一頁上，建立一個具有空白 src 屬性的圖像元素：。 使用下列指令從localStorage 取得Base64 字串localStorage.getItem('imgData').設定圖片的src屬性為Base64字串：bannerImg.src =「data:image/png ;base64,”dataImage.

以上是如何使用LocalStorage儲存和顯示影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！