如何將圖片儲存到localStorage並在下一頁顯示？

將圖片儲存到localStorage 並顯示在下一頁

您的要求是上傳圖片，將其儲存到localStorage，然後將其顯示在後續頁面上。以下是滿足此需求的解決方案：

儲存圖片

使用您提到的HTML 和JavaScript 函數在頁面上顯示圖像後，請按照以下附加操作操作點選「儲存」按鈕時的步驟：

1. 使用下列指令擷取橫幅影像的HTML元素document.getElementById('bannerImg').
2. 使用下面提供的 getBase64Image 函數將映像轉換為 Base64 字串。
3. 使用 localStorage.setItem("imgData" 將 Base64 字串儲存為 localStorage 項目」, imgData).

將圖片轉換為 Base64字串的函數：

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

在下一頁顯示圖像

在後續頁面上，使用空白 src建立圖片attribute:

<img src="">

然後，在頁面載入後執行以下幾行：

1. 使用var dataImage = localStorage.getItem('imgData') 從localStorage 擷取Base64 字元串。 =取得表格橫幅圖片的HTML元素document.getElementById('tableBanner').
2. 將映像的src 屬性設定為Base64 字串：

3. bannerImg.src = "data:image/png;base64," + dataImage;

此方法可讓您儲存localStorage中的圖像並在下一頁顯示它沒有任何問題。

以上是如何將圖片儲存到localStorage並在下一頁顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！