localStorageからの画像の保存と読み込み

Question

基本的には、画像をlocalStorageに保存しようとしていて、次のページに同じ画像を読み込みます。

私はこの偉大な例に出くわした：http://jsfiddle.net/8V9w6/

が、私は私が今までだけ極端に小さい文字列に対してのlocalStorageを使用しているので、これはどのように動作するか全く見当がつかない。

私は上記の追加jsfiddleリンクは、複数のファイルのアップロードを可能にし、それは間違いなく私が持って好きではない何かであるjQueryの

<img id="bannerImg" src="images/image-placeholder.jpg" alt="Banner Image" style="display:none;" width="100%" height="200px" /> 

で扱うファイルアップロードを経て変更されますイメージを持っています。

私が知る必要があるのは、イメージを保存するために最初のページに何を配置する必要がありますか、イメージをロードするために2番目のページに何を配置する必要がありますか？

私はすべてを処理するsaveボタンを持っています。

Answer 1

これは何か？

var img = new Image(); 
img.src = 'mypicture.png'; 
img.load = function() { 
var canvas = document.createElement('canvas'); 
document.body.appendChild(canvas); 
var context = canvas.getContext('2d'); 
context.drawImage(img, 0, 0); 
var data = context.getImageData(x, y, img.width, img.height).data; 
localStorage.setItem('image', data); // save image data 
}; 

2番目のページでlocalStorageを取得します。このような何かを試してみてください。

window.onload = function() { 
var picture = localStorage.getItem('image'); 
var image = document.createElement('img'); 
image.src = picture; 
document.body.appendChild(image); 
};