javascriptで困っています。教えてください

html5でcanvasに描いた画像をsave_buttonを押してlocalStorageで保存して、それをload_buttonをおして読み込もうとしているのですが、うまくいきません。
canvas.toDataURL();でデータを6bit毎に分割できています。
それを保存して、
var base64 = window.localStorage.getItem("saveKey");で読み込むこともできています。

その後canvasに描画できません。
よろしくお願いします。


var canvas = document.getElementById("myCanvas");


$("#save_button").click(function () {

　　 // Canvasからbase64エンコーディングされた画像データを取得する
var canvas = document.getElementById("myCanvas");
var base64 = canvas.toDataURL();

// LocalStorageに保存する
window.localStorage.setItem("saveKey", base64);

});

$("#load_button").click(function () {

// LocalStroageからデータを取得する
var base64 = window.localStorage.getItem("saveKey");

// Imageオブジェクトを作成し、src属性にデータを設定する
var image = new Image();
image.src = base64;
image.onload = function(){

// 画像の読み込みが終わったら、Canvasに画像を反映する。
canvas.drawImage(image, 0, 0);

}

});

No.2 ベストアンサー 回答者： fujillin 回答日時： 2013/11/13 12:42

dataStorageって使ったことがないので、わからないのですが…

これでもだめでしょうか？
（全角空白は半角にしてください）
Fxで動作確認

$("#load_button").click(function () {
　var base64 = window.localStorage.getItem("saveKey");
　var image = new Image();
　image.onload = function(){　　//念のため順序を入替え
//　canvas.drawImage(image, 0, 0);　　//以下に変更
　　canvas.getContext('2d').drawImage(image, 0, 0);　//←変更
　}
　image.src = base64;
});


[ 参考 ]
http://www.html5.jp/canvas/ref.html

この回答へのお礼

ありがとうございます。コンテキストの取得で間違いがありました。参考になりました。

お礼日時：2013/11/13 18:01

No.1 回答者： taloo 回答日時： 2013/11/13 10:41

Safariにて、localStorageに保存した画像データをImage()で表示できなくなるという現象を確認しています。

私のケースではFirefox24では期待通り表示されますが、
他のブラウザではどうでしょうか。

なお、localStorageに保存せずに、canvasからImage()に、そのImage()をあらためてcanvasに描画すると、期待通り動作する事は確認しています。
ブラウザのバグなら何か別のフォーマット（独自フォーマット）にエンコードしてlocalStorageに保存、表示時はbase64にデコードして使用とすればいけるかもしれませんが、その方法は試していません。

ご参考まで。

この回答へのお礼

情報ありがとうございます。参考にさせていただきます。

お礼日時：2013/11/13 17:57