如何將圖像追加到本地存儲？

我有一個div，我想保存所有這些圖像。事情就這麼簡單：

<div id="imageContainer"> 
<!--have images go here--> 
</div>

我試圖做到的是這樣的：

if (Math.floor((Math.random()*3)+1) == 1) { // 1/3 chance of conditional being true 
    // append some image to #imageContainer and have it locally stored 
} else { 
    alert('no luck this time...'); 
}

因此，每個上面條件爲真，我將如何添加圖像到#imageContainer有時間它在本地保存？

來源

2012-08-03 Jon

谷歌我的兒子：http://diveintohtml5.info/storage.html – 2012-08-03 17:53:30

你想存儲src？ – NicoSantangelo 2012-08-03 17:54:30

我想在#imageContainer – Jon 2012-08-03 19:22:00

如果圖像很小，可以將圖像作爲base64編碼的數據URI存儲在localStorage中。例如，這裏是StackOverflow的圖像作爲data URI：

數據：圖像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABSElEQVR42mP8DwQMeMDfrx8Z7uc6gWn59g0MHEo6KPKMhAwAgZezaxg + 7FnBwMzNDzaEVVyWNANA4Fl/LsPnE9vBLpCpWQg2DKcBPx4cZPjz4QEDj0E8ileetMQz/Lh3hYHXwpNBqnAybgNeLg8EG8IioMAg6FjPwKXhDxb // fIxw8PKALBhAi4RDOKpLdgNANn + fn8jw7cbG8F8ZINghoCA4uR9 + MPg348PDB + PTwQbBDIUZJCwZz9QQhgsDwoPDAMu7FzIwM7Fy8AnIsMgIq8BZPOBNf96cRFsGBMHP4N45HrcsTAr3QTDJUrGLkDDNBmEuL4xiMlqMXAo2OM2AOSCNw + VM/z89onh6fVTGIalzTyDmZDS09PBnJkzZ2JoABn05uENhk9vngDZnxkM3OMZkNVjGABj4wLIamhjADEApwGkAqoYAABh69q0dfMNBwAAAABJRU5ErkJggg ==

所以你會表明這樣一個形象：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAA...[snip]" />

所有你必須做的就是創建一個<img>並設置src屬性數據URI。

來源

2012-08-03 17:56:03 vcsjones

嗯，有趣。這也可以在移動設備上運行？ – Jon 2012-08-04 03:01:53

@Ferri它可以在移動瀏覽器上工作，但我確信數據URI有大小限制，我不確定它們是什麼。 – vcsjones 2012-08-04 03:06:22

萬一你沒有服用有關圖像實際上只是意味着HTML作爲上述人真正回答的localStorage和dataURL很好，你會做這樣的事情...

localStorage['imageContainerHTML'] = document.getElementById('imageContainer').innerHTML;

這只是存儲HTML，而不是圖像。對於圖片，請使用其他傢伙的建議。

來源

2012-08-03 22:56:13

如何將圖像追加到本地存儲？

回答

相關問題