首頁 > web前端 > js教程 > 如何將圖片儲存到LocalStorage並在新頁面顯示?

如何將圖片儲存到LocalStorage並在新頁面顯示?

Mary-Kate Olsen
發布: 2024-11-29 03:08:09
原創
869 人瀏覽過

How Can I Save an Image to LocalStorage and Display It on a New Page?

將影像儲存到LocalStorage 並在新頁面上顯示

使用Web 表單時,通常需要處理影像上傳和顯示儲存它們以進行以後顯示。本文提供了上傳圖像、儲存到 localStorage 以及在下一頁顯示圖像的全面解決方案。

上傳和顯示圖像

上傳和顯示要在當前頁面上顯示圖像,請使用類型屬性設置為“file”的HTML 輸入字段以及調用readURL 函數的onchange 事件處理程序。函數應使用 FileReader API 讀取選定的圖像文件,並使用圖像元素的 src 屬性將其顯示在頁面上。

將影像儲存到LocalStorage

使用者填入表單的其餘部分並點選「儲存」按鈕後,將所有表單輸入(包括影像)儲存為localStorage 字元串。若要儲存映像,請使用 getElementById 函數取得頁面上的映像元素,使用回應中提供的函數將其轉換為 Base64 字串,並將該字串儲存為 localStorage 值。

在新頁面上顯示圖像

在下一頁上,建立一個具有空白 src 屬性的圖像。頁面載入時,使用 localStorage.getItem 函數從 localStorage 擷取影像的 Base64 字串,並將其套用到影像的 src 屬性中,使用 data:image/png;base64 前綴來指示影像資料格式。

以上是如何將圖片儲存到LocalStorage並在新頁面顯示?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板