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 · ベストアンサー

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

お礼

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

回答No.1

神崎 渉瑠（@taloo）

Safariにて、localStorageに保存した画像データをImage()で表示できなくなるという現象を確認しています。
私のケースではFirefox24では期待通り表示されますが、
他のブラウザではどうでしょうか。

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

ご参考まで。

お礼

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