如何在頁面載入時使用 localStorage 儲存和顯示圖像？

跨頁面載入使用localStorage 儲存與顯示圖片

問題：

使用者可以上傳🎜>問題：

使用者可以上傳圖像，填寫表單輸入，將表單儲存到localStorage，然後繼續新頁面。目標是將上傳的圖像儲存到 localStorage 並在下一頁顯示。

解決方案：

1. 抓取圖片：
   抓取圖片：

2. 使用包含getElementById影像的HTML 元素。

   轉換為 Base64：

3. 定義一個函數將圖像轉換為使用 canvas 和的 Base64字串表示toDataURL.

   儲存到localStorage:

4. 使用帶有唯一值的setItem 將唯一值的setItem 將唯一值字串作為值儲存在localStorage 中鍵。

   • 在下一頁：
   • 建立一個具有空白 src 屬性的圖像元素。
使用下列指令從 localStorage 擷取 Base64 字串getItem。

5. 更新映像的 src 屬性以包含 Base64 字串。

   • 範例程式碼：

     const imgData = getBase64Image(document.getElementById('bannerImg'));
     localStorage.setItem('imgData', imgData);

   • 儲存到本地儲存：

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

   顯示在下一頁：

此解決方案允許您將上傳的圖像保存到 localStorage 作為Base64 字串並透過檢索該字串並將其設定為圖像的 src 屬性將其顯示在不同的頁面上。

以上是如何在頁面載入時使用 localStorage 儲存和顯示圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！