1

画像をローカル ストレージに追加しようとしています。

これらすべての画像を保持したい 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てローカルに保存するのでしょうか?

4

2 に答える 2

3

画像が小さい場合は、画像を base64 でエンコードされたデータ URI として localStorage に保存できます。たとえば、データ URIとしての StackOverflow 画像は次のとおりです。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABSElEQVR42mP8DwQMeMDfrx8Z7uc6gWn59g0MHEo6KPKMhAwAgZezaxg+7FnBwMzNDzaEVVyWNANA4Fl/LsPnE9vBLpCpWQg2DKcBPx4cZPjz4QEDj0E8ileetMQz/Lh3hYHXwpNBqnAybgNeLg8EG8IioMAg6FjPwKXhDxb//fIxw8PKALBhAi4RDOKpLdgNANn+fn8jw7cbG8F8ZINghoCA4uR9+MPg348PDB+PTwQbBDIUZJCwZz9QQhgsDwoPDAMu7FzIwM7Fy8AnIsMgIq8BZPOBNf96cRFsGBMHP4N45HrcsTAr3QTDJUrGLkDDNBmEuL4xiMlqMXAo2OM2AOSCNw+vM/z89onh6fVTGIalzTyDmZDS09PBnJkzZ2JoABn05uENhk9vngDZnxkM3OMZkNVjGABj4wLIamhjADEApwGkAqoYAABh69q0dfMNBwAAAABJRU5ErkJggg==

したがって、次のような画像でそれを示します。

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

を作成し、属性をデータ URI に<img>設定するだけです。src

于 2012-08-03T17:56:03.710 に答える
0

上記の人々が実際にlocalStorageとdataURLにうまく答えたので、あなたが画像について取っておらず、本当にHTMLを意味していた場合に備えて、あなたはこのようなことをするでしょう...

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

これは、画像ではなく HTML のみを保存しています。画像については、他の野郎からのアドバイスを使用してください。

于 2012-08-03T22:56:13.657 に答える