如何將圖像保存到localStorage並將其顯示在下一頁上？

102

所以基本上，我需要做的標題狀態;上傳單個圖像，將其保存到localStorage，然後將其顯示在下一頁上。如何將圖像保存到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項目。

保存按鈕也將引導他們到一個新的頁面。這個新頁面將在一張表格中顯示用戶數據，圖像位於最上方。

這麼簡單明瞭，一旦按下'保存'按鈕，我需要將圖像保存在localStorage中，然後從localStorage下一頁上借出圖像。

我找到了一些解決方案，如本琴：http://jsfiddle.net/8V9w6/

這：https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

雖然我仍然是如何工作極其混亂，我只是真的需要一個簡單的解決方案。基本上，我只需要通過getElementByID找到圖像，一旦按下「保存」按鈕，然後處理並保存圖像。

非常感謝所有幫助。謝謝！

來源

2013-10-04 Fizzix

尼斯問題.......... –

@NikhilChavan - 謝謝:) – Fizzix

什麼是錯的在本地存儲中存儲reader.result，如下例所示：http://jsfiddle.net/x11joex11/9g8NN/？ – Trace

148

對誰也需要這個問題很好解決：

首先，我搶我的getElementByID圖像，並保存爲Base64。然後我將Base64字符串保存爲localStorage值。

bannerImage = document.getElementById('bannerImg'); 
imgData = getBase64Image(bannerImage); 
localStorage.setItem("imgData", 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像這樣：

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

當頁面加載完畢後，我使用下面三行從localstorage獲取base64字符串，並將其應用到具有我創建的空白src的圖像：

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

在很多不同的瀏覽器和版本中測試過它，它似乎工作得很好。

來源

2013-10-04 14:22:39 Fizzix

Gif不支持，因爲畫布不支持gif。 – Allen

你不需要getBase64Image函數。數據URL已經是64位的，所以當你調用reader.readAsDataURL時，發送到reader.onload處理程序的e.target.result將是你所需要的。 –

請記住，本地/會話存儲的限制大約爲5MB。並且將二進制圖像轉換爲基本的64位編碼字符串將使其大約增加30％。所以這不適用於高分辨率圖像。 –

您可以將圖像序列化爲數據URI。這裏有一個教程blog post。這將產生一個字符串，你可以存儲在本地存儲。然後在下一頁中，使用數據uri作爲圖像的來源。

來源

2013-10-04 14:05:10

最好不要鏈接到博客文章，下次嘗試解釋或至少展示代碼如何執行此操作。 – chbchb55

我在寫的localStorage保存圖像的小2,2kb庫JQueryImageCaching 用法：

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

來源

2015-05-03 13:16:01 moledet

2.2千字節對於像這樣的東西是巨大的，再加上我猜測，這甚至不考慮jQuery本身的大小。我建議不用jQuery寫它，也許它會更小 – chbchb55

如何將圖像保存到localStorage並將其顯示在下一頁上？

回答

相關問題