將圖像加載到localStorage並將圖像src設置到該位置

我已經成功地允許用戶將圖像上載到本地存儲，但我希望能夠在圖像上填充圖像元素接着就，隨即。將圖像加載到localStorage並將圖像src設置到該位置

<h3>Please upload the image you wish to use.</h3> 
<input id="photoin" type="file" accept="image/*;capture=camera"></input> 
<a href="#delete_1" data-role="button" onClick="save()">Submit</a> 

<script> 
    var i = 0; 
    function save(){     
     var input = document.getElementById("photoin").value; 
     var name = "photo_" + i; 
     localStorage.setItem(name, input);  
     $("#QR").src = window.localStorage[name]; 
     i++; 
    } 
</script>

我正在尋找一些能夠成功地給我圖片的URL中存儲，看到「window.localStorage [名]」只返回與該鍵配對的值。

謝謝！

來源

2012-07-20 NodeNodeNode

爲什麼你要這樣做？瀏覽器緩存不足以將您的圖像保存在主機上？ – devundef 2012-07-20 15:41:36

我希望用戶能夠更改頁面上的內容（即，我希望用戶上傳他們的圖像，而不是我的圖像，然後讓該圖像出現在頁面上） – NodeNodeNode 2012-07-20 15:55:25

我明白了！ Mayge你可以將圖像轉換爲base64，然後放入src =「data：image/png; <.. base64圖像數據...>」。您必須使用HTML5文件api來讀取圖像文件，然後將數據轉換爲base64。這篇文章將幫助你轉換：http://stackoverflow.com/questions/246801/how-can-you-encode-to-base64-using-javascript#246813 – devundef 2012-07-20 16:08:34

那麼你可以存儲在localStorage的實際圖像數據（不過要小心 - 有限制）

看一看the HTML5 rocks tutorial &向下滾動到比特爲首讀取文件

這裏，文件正在讀取，然後輸出到img：src標籤中。你可以額外把它放在localStorage

例如：http://jsfiddle.net/8V9w6/ - 選擇一個圖像文件，看到縮略圖？然後重新加載頁面。縮略圖應該保留在那裏。（Works latest Chrome/Firefox）

來源

2012-07-20 16:44:00 paulslater19

這正是我想要的！我會試試看，讓你知道它的工作方式！ – NodeNodeNode 2012-07-20 18:31:19

將圖像加載到localStorage並將圖像src設置到該位置

回答

相關問題