HTML5 - ファイル間にキャンバスを渡す

Question

私は2つのhtmlファイルを持っています。例えば、1.htmlと2.htmlで、1.jsと2.jsでjavascriptを参照しています。 1.htmlでは、私はキャンバスオブジェクトをドラッグアンドドロップ機能を持っているので、キャンバスに追加の画像を追加する方法はdrawImageです。 1.htmlで画像を追加し終えたら、キャンバスをlocalstorageに保存します。私は好きですので、ここで、

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext('2d'); 

ctx.drawImage(imageObj, x, y, imageObj.width, imageObj.height); 
ctx.drawImage(imageObj2, x2, y2, imageObj2.width, imageObj2.height); 

localStorage.setItem("context1", ctx); // Unsure if i should save context or canvas 

今、2.htmlに、私は1.htmlキャンバスに保存され、設定/ 1.htmlにそれを適用取得したい：：まもなく、それは次のようになります

var savedContext = localStorage.getItem("context1"); 

var canvas1 = document.getElementById('canvas1'); 
var context1 = savedContext; 

私は結果が得られていないので、キャンバスに描画されたすべての画像をそのように渡すことが可能かどうか分かりません。

Answer 1

キャンバスやコンテキストを保存しようとするのではなく、データURLを保存することで、必要なことを行うことができます。

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext('2d'); 

ctx.drawImage(imageObj, x, y, imageObj.width, imageObj.height); 
ctx.drawImage(imageObj2, x2, y2, imageObj2.width, imageObj2.height); 

localStorage.setItem("imageData", canvas.toDataUrl()); 

し、後でそれを復元：

var img = document.createElement('img'); 
img.src = localStorage.getItem("imageData"); 

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext('2d'); 

ctx.drawImage(img, x, y, img.width, img.height); 

また、あなたはキャンバスに描くことができます前に、IMGの上に発射する「オンロード」イベントを待つ必要がありますが、私はありません確かに。

Answer 2

これは正しい方法ではないと思います。 理由：localstorage APIは、文字列のキーと値のペアのみを保持します。したがって、キャンバス要素の文字列表現が必要です。ここ

ルック：この場合

Javascript Canvas Serialization/Deserialization?