1

canvas id = drawareaに描いた絵をsaveボタンを押してリロードするとdrawareaに
描いた絵が表示されるアクションをしたいと思っています。

saveボタンを押すと、drawareaのurlが生成され、保存されているのは分かるのですが、
リロードした際に表示がされません。

 $("#save").on("click", function(){
var canvas = document.createElement("canvas")
var url = canvas.toDataURL();
localStorage.setItem("save", url);
});

var img = new Image();
img.src = localStorage.getItem("save");
img.onload = function(){
    var drawarea = document.getElementById("drawarea");
    var context = drawarea.getContext("2d");
    context.drawImage(img, 0, 0);
};

こんな感じで取得しようとしているのですが、表示だけ上手くいかない状況です。
どのような原因がありますでしょうか?

2
  • 私見に過ぎませんが、onloadがうまく働いていないのではないでしょうか。少なくとも、img.src =... する前にonloadイベントの設定をする必要があるように思いますので、書き順を変えてみたらどうでしょうか。
    – BLUEPIXY
    Commented 2015年8月11日 8:23
  • 書き方を少し変えてリロードした時の呼び出し方法を変えたら何とか出来ました。 ありがとうございました。 Commented 2015年8月11日 8:48

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。