如何在 localStorage 中儲存和檢索影像以用於 Web 顯示？

在localStorage 中存儲和檢索圖像以用於Web 顯示

問題：

你怎麼能上傳圖片，儲存到localStorage，後續顯示頁？

解決方案：

將映像儲存到本地儲存：

1. 抓取上傳的映像getElementById( 'bannerImg').

2. 使用getBase64Image() 函數將圖片轉換為 Base64 字串：

   var imgData = getBase64Image(bannerImage);

3. 將 Base64字串另存為本機儲存value:

   localStorage.setItem("imgData", imgData);

從本地儲存中擷取影像並顯示在下一頁：

1. 在新頁面上，建立一個帶有空白的圖片元素src:

   <img src="">

2. 頁面載入時，從localStorage 擷取 Base64 字串：

   var dataImage = localStorage.getItem('imgData');

3. 將 Base64字串套用於映像的原始碼屬性：

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

其他注意事項：

• getBase64Image() 函數預設將圖片轉換為PNG 格式。如果需要，您可以指定不同的格式。
• 此解決方案與大多數主要瀏覽器相容。但是，某些舊版瀏覽器可能不支援 localStorage。

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