首頁猿問如何將圖像保存到本地存儲并顯示在下一頁？

如何將圖像保存到本地存儲并顯示在下一頁？

JavaScript JQuery Html/CSS

守候你守候我 2019-07-01 15:59:48

如何將圖像保存到本地存儲并顯示在下一頁？所以，基本上，我需要上傳一個圖像，保存到localStorage，然后在下一頁顯示它。目前，我的HTML文件上傳：<input type='file' id="uploadBannerImage" onchange="readURL(this);" />，它使用此函數在頁面上顯示圖像。function readURL(input) { document.getElementById("bannerImg").style.display = "block"; if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById('bannerImg').src = e.target.result; } reader.readAsDataURL(input.files[0]); }}該圖像立即顯示在頁面上，供用戶查看。然后要求他們填寫表格的其余部分。這部分工作很完美。一旦表單完成，他們就按下“保存”按鈕。一旦按下此按鈕，我將所有表單輸入保存為localStorage弦樂。我需要一種方法也可以將圖像保存為localStorage物品?！氨４妗卑粹o也會將它們指向一個新頁面。這個新頁面將在表格中顯示用戶數據，圖像位于頂部。簡單明了，我需要將圖像保存在localStorage一旦按下“保存”按鈕，然后將下一頁上的圖像從localStorage.我找到了一些解決方案，比如這把小提琴和這篇文章發表在Moz：/a Hack上。.雖然我仍然非常困惑這是如何工作的，我只需要一個簡單的解決方案。基本上，我只需要通過getElementByID一旦按下“保存”按鈕，然后處理并保存圖像。

查看完整描述

3 回答

郎朗坤

TA貢獻1921條經驗獲得超9個贊

對于那些同樣需要解決這個問題的人：

首先，我用getElementByID，并將圖像保存為base 64。然后，我將base 64字符串保存為localStorage價值。

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

下面是將圖像轉換為base 64字符串的函數：

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就像這樣：

<img src="" id="tableBanner" />

當頁面加載時，我使用下面三行來獲得base 64字符串localStorage，并將其應用于空白的圖像。src我創造了：

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

在許多不同的瀏覽器和版本中進行了測試，它似乎運行得很好。

反對回復 2019-07-01

慕標5832272

TA貢獻1966條經驗獲得超4個贊

我在本地存儲中編寫了一個2，2kb的圖像保存庫JQueryImageCache用法：

<img data-src="path/to/image"><script>
    $('img').imageCaching();</script>

反對回復 2019-07-01

皈依舞

TA貢獻1851條經驗獲得超3個贊

可以將圖像序列化為數據URI。這里有一個教程博客帖子..這將產生一個可以存儲在本地存儲中的字符串。然后在下一頁中，使用數據uri作為圖像的源。

反對回復 2019-07-01

3 回答
0 關注
766 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

如何將圖像保存到本地存儲并顯示在下一頁？

如何將圖像保存到本地存儲并顯示在下一頁？

3 回答

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何將圖像保存到本地存儲并顯示在下一頁？

如何將圖像保存到本地存儲并顯示在下一頁？

3 回答

相關問題推薦

添加回答

如何將圖像保存到本地存儲并顯示在下一頁？