イメージをlocalStorageに保存して次のページに表示する方法は？

Question

基本的に、私はタイトルの状態として行う必要があります。 1枚の画像をアップロードしてlocalStorageに保存し、次のページに表示します。

現在、私は私のHTMLファイルのアップロードを持っている：

イメージはへのユーザーのページに瞬時に表示されるページ上の画像を表示する

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]); 
    } 
} 

を、この機能を使用しています

<input type='file' id="uploadBannerImage" onchange="readURL(this);" /> 

見る。彼らはフォームの残りの部分を記入するように求められます。この部分は完全に機能しています。

フォームが完成したら、[保存]ボタンを押します。このボタンを押すと、すべてのフォーム入力をlocalStorage文字列として保存します。画像をlocalStorageアイテムとして保存する方法が必要です。

保存ボタンを使用すると、新しいページが表示されます。この新しいページには、ユーザーのデータがテーブルに表示され、そのイメージは一番上に表示されます。

「保存」ボタンを押してから、画像をlocalStorageに保存してから、次のページの画像をlocalStorageにローンする必要があります。

私は、このフィドルなど、いくつかの解決策を見つけた：http://jsfiddle.net/8V9w6/

そして、この：https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

私はこれがどのように機能するかについてはまだ非常に混乱しています、と私は本当にシンプルなソリューションを必要としますが。基本的には、「保存」ボタンが押された後に画像を見つけて、処理して画像を保存する必要があります。getElementByID

すべてのサポートをよろしくお願いいたします。ありがとう！

Answer 1

。次に、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" /> 

そして、ページがロードされると、次の3行を使ってlocalstorageからbase64文字列を取得し、作成した空白のsrcをイメージに適用します。

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

かなり多くの異なるブラウザとバージョンでテストされており、かなりうまくいくようです。

Answer 2

イメージをデータURIにシリアル化することができます。このblog postにチュートリアルがあります。これにより、ローカルストレージに格納できる文字列が生成されます。次に、次のページで、データuriをイメージのソースとして使用します。まず、私はgetElementByIDと私のイメージをつかむと、Base64のように、画像を保存

：また、この問題解決を必要とする誰に

Answer 3

私はのlocalStorage JQueryImageCaching 使用法で画像を保存するのはほとんど2,2kbライブラリを書いた：

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