画像をlocalStorageに保存して次のページに表示する方法は?
したがって、基本的には、1つの画像をアップロードして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。 私は、次のようないくつかの解決策を見つけ、このフィドルと// HACKS:MOZで、この記事。 これがどのように機能するかについてはまだ非常に混乱していますが、本当に必要なのは単純なソリューションだけです。基本的にはgetElementByID、[保存]ボタンを押して画像を検索し、画像を処理して保存するだけです。