首頁(yè) 猿問(wèn) 如何將圖像保存到本地存儲(chǔ)并顯示在下一頁(yè)？

如何將圖像保存到本地存儲(chǔ)并顯示在下一頁(yè)？

JavaScript JQuery Html/CSS

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

如何將圖像保存到本地存儲(chǔ)并顯示在下一頁(yè)？所以，基本上，我需要上傳一個(gè)圖像，保存到localStorage，然后在下一頁(yè)顯示它。目前，我的HTML文件上傳：<input type='file' id="uploadBannerImage" onchange="readURL(this);" />，它使用此函數(shù)在頁(yè)面上顯示圖像。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]); }}該圖像立即顯示在頁(yè)面上，供用戶(hù)查看。然后要求他們填寫(xiě)表格的其余部分。這部分工作很完美。一旦表單完成，他們就按下“保存”按鈕。一旦按下此按鈕，我將所有表單輸入保存為localStorage弦樂(lè)。我需要一種方法也可以將圖像保存為localStorage物品?！氨４妗卑粹o也會(huì)將它們指向一個(gè)新頁(yè)面。這個(gè)新頁(yè)面將在表格中顯示用戶(hù)數(shù)據(jù)，圖像位于頂部。簡(jiǎn)單明了，我需要將圖像保存在localStorage一旦按下“保存”按鈕，然后將下一頁(yè)上的圖像從localStorage.我找到了一些解決方案，比如這把小提琴和這篇文章發(fā)表在Moz：/a Hack上。.雖然我仍然非常困惑這是如何工作的，我只需要一個(gè)簡(jiǎn)單的解決方案。基本上，我只需要通過(guò)getElementByID一旦按下“保存”按鈕，然后處理并保存圖像。

查看完整描述

3 回答

郎朗坤

TA貢獻(xiàn)1921條經(jīng)驗(yàn) 獲得超9個(gè)贊

對(duì)于那些同樣需要解決這個(gè)問(wèn)題的人：

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

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

下面是將圖像轉(zhuǎn)換為base 64字符串的函數(shù)：

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

然后，在我的下一頁(yè)上，我創(chuàng)建了一個(gè)空白的圖像。src就像這樣：

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

當(dāng)頁(yè)面加載時(shí)，我使用下面三行來(lái)獲得base 64字符串localStorage，并將其應(yīng)用于空白的圖像。src我創(chuàng)造了：

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

在許多不同的瀏覽器和版本中進(jìn)行了測(cè)試，它似乎運(yùn)行得很好。

反對(duì) 回復(fù) 2019-07-01

慕標(biāo)5832272

TA貢獻(xiàn)1966條經(jīng)驗(yàn) 獲得超4個(gè)贊

我在本地存儲(chǔ)中編寫(xiě)了一個(gè)2，2kb的圖像保存庫(kù)JQueryImageCache用法：

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

反對(duì) 回復(fù) 2019-07-01

皈依舞

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超3個(gè)贊

可以將圖像序列化為數(shù)據(jù)URI。這里有一個(gè)教程博客帖子..這將產(chǎn)生一個(gè)可以存儲(chǔ)在本地存儲(chǔ)中的字符串。然后在下一頁(yè)中，使用數(shù)據(jù)uri作為圖像的源。

反對(duì) 回復(fù) 2019-07-01

3 回答
0 關(guān)注
761 瀏覽

關(guān)注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

如何將圖像保存到本地存儲(chǔ)并顯示在下一頁(yè)？

如何將圖像保存到本地存儲(chǔ)并顯示在下一頁(yè)？

3 回答

相關(guān)問(wèn)題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何將圖像保存到本地存儲(chǔ)并顯示在下一頁(yè)？

如何將圖像保存到本地存儲(chǔ)并顯示在下一頁(yè)？

3 回答

相關(guān)問(wèn)題推薦

添加回答

如何將圖像保存到本地存儲(chǔ)并顯示在下一頁(yè)？