CanvasでlocalStorageに保存した画像を呼び出したいが上手くいかない

描画エリアに線で画像を塗り、それを保存、呼び出しをさせるという事をさせたいと考えています。

localStorageに保存するまでは上手くいったのですが、それをgetItemで呼び出させる所が上手くいかず、詰まっております。

コンソール上はエラーが出てこなかった（出てきた所は逐一修正してみました）ので、呼び出し部のスクリプトが機能していないと思われます。

が、どう対応したら良いか分からず、数日過ぎてしまった所です...
###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ
「load」ボタンで保存した画像を呼び出したいが、機能しない


HTMLで作ったloadボタンを押した時、localStorageに保存した
データを呼び出して表示させたいのですが、反応がありませんでした。localStorage.setItem自体は機能しており、描いた線は
toDataURLでpngに変換してimg要素にしています。

<!-- 描画した線を呼び出すボタン -->
<button id="load_btn">ロード</button>

// 描いた線を保存する

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

// 描いた線を呼び出す
$("#load_btn").on("click",function(){
 var url = window.localStorage.getItem("save");
 var image = new Image();
  image.onload = function(){
  context.drawImage(image, 0, 0);
	 };
  image.src = url;
     });

エラーメッセージ

###該当のソースコード

HTML5.Javascript,jQuery,canvas

ここにご自身が実行したソースコードを書いてください


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas.html</title>
</head>
<body>
<section>
<h1>Canvas</h1>
<nav>
 <!-- 線の色を変更するHTML要素 -->
<select name="color" id="selectbox"> 
<option value="#f52c09">赤</option>     
<option value="#000000">黒</option> 
<option value="#4325f7">青</option> 
</select>

 <!-- 線の太さを変更するHTML要素 -->
  <input type="range" id="line_bold" min="1" max="10">

 <!-- 描画した線を消すクリアボタン-->
  <button id="clear_btn">クリア</button>

  <!-- 描画した線を保存するボタン -->
  <button id="save_btn">セーブ</button>

  <!-- 描画した線を呼び出すボタン -->
  <button id="load_btn">ロード</button>

</nav>
<canvas id="drawarea" width="500" height="500" style="border:1px solid blue;"></canvas>
</section>

<script src="js/jquery-2.1.3.min.js"></script>
<script>
//初期化
var canvas_mouse_event = false; //スイッチ [ true=線を引く, false=線は引かない ]  ＊＊＊
var txy   = 10;               //iPadなどは15＋すると良いかも
var oldX  = 0;                //１つ前の座標を代入するための変数
var oldY  = 0;                //１つ前の座標を代入するための変数
var bold_line = 3;            //ラインの太さをここで指定
var color = "#f00";           //ラインの色をここで指定

	var can = $("#drawarea")[0];
	console.log(can);
	var context = can.getContext("2d");

//MouseDown：フラグをTrue
	$(can).on("mousedown", function(e){
		oldX = e.offsetX;
		oldY = e.offsetY - txy;
		canvas_mouse_event=true;
		window.localStorage.setItem("save", can.toDataURL());
	});

	// 線の色を変更する

	$("#selectbox").on("change",function(){
    	color = $(this).val();
	});

//MouseMove：マウスをクリックされているか、されていないかチェックする
	$(can).on("mousemove", function (e){
		if(canvas_mouse_event==true){
			var px = e.offsetX;
			var py = e.offsetY - txy;
			context.strokeStyle = color;
			context.lineWidth = bold_line;
			context.beginPath();
			context.lineJoin= "round";
			context.lineCap = "round";
			context.moveTo(oldX, oldY);
			context.lineTo(px, py);
			context.stroke();
			context.closePath();
			//context.drawImage(image,50,50);
			oldX = px;
			oldY = py;
	}
});

//MouseUp：フラグをfalse
	$(can).on("mouseup", function(e){
		canvas_mouse_event=false;
	});

//Mouseleave：マウスが描画エリアから外れたらフラグをfalseにする
	$(can).on("mouseleave", function(e){
		canvas_mouse_event=false;
	});

	//描いた線を消す

	$("#clear_btn").on("click",function (){
		context.beginPath();
		context.clearRect(0, 0, can.width, can.height);
	});

	//文字の太さを変更する

	$("#line_bold").on("change",function(){
		bold_line = $(this).val();
	});

	// 描いた線を保存する

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

	// 描いた線を呼び出す

	$("#load_btn").on("click",function(){
	 var url = window.localStorage.getItem("save");
	 var image = new Image();
	 image.onload = function(){
	 	context.drawImage(image, 0, 0);
	 };

	 image.src = url;

	});

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

</script>
</body>
</html>

###試したこと
課題に対してアプローチしたことを記載してください
canvas localStorageで検索して、ひたすら良いやり方はないか調べましたが、実装しても上手くいきませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2016/08/07 09:07 編集

「何」が「どのように」上手くいかないのか、具体的にコードのどの部分で詰まっているのかなどを追記されたほうが回答が望めると思います。

KyoheiTsuno

2016/08/07 11:28

ご指摘ありがとうございます。少しでも分かりやすくする為、詰まっているコードを追記しました。引き続き、確認してみます。

行動規範の内容に同意します

回答1件

ベストアンサー

多分保存されていません。

JavaScript
1// 描いた線を保存する
2$( "#save_btn" ).on( "click", function() {
3	var canvas = document.createElement("canvas");	// 新たに真っ白なcanvas要素を準備している
4	var url = canvas.toDataURL();	// やっぱり真っ白（高さや幅も無いかも）
5	localStorage.setItem( "save", url );	// それを保存
6} );

【[HTML5] Canvasの内容をLocalStorageで保存／読み込み - YoheiM .NET】
http://www.yoheim.net/blog.php?q=20120204

投稿2016/08/07 12:22

kei344

総合スコア69400

KyoheiTsuno

2016/08/07 13:58

ご回答下さいまして、誠にありがとうございます。上記のURLは以前試してみたのですが、上手くいかず。今回も試しましたが、やはりエラーが出てきました。 <エラー内容> canvas_base.html:109 Uncaught TypeError: Cannot read property 'toDataURL' of null Google Chromeのコンソールにて確認した所、toDataURLがnullというエラーが出てきています。 //MouseDown：フラグをTrue $(can).on("mousedown", function(e){ oldX = e.offsetX; oldY = e.offsetY - txy; canvas_mouse_event=true; window.localStorage.setItem("save", can.toDataURL()); }); こちらのコードで"save"をsetしているので、("save")としましたが、 getElementByIdでの()内記述が間違っているのではないか？と疑っています。

KyoheiTsuno

2016/08/07 13:59

＜エラー箇所＞ // 描いた線を保存する $("#save_btn").on("click",function(){ var canvas = document.getElementById("save");　←こちらです var url = canvas.toDataURL(); window.localStorage.setItem("save",url); });

kei344

2016/08/07 14:07

コードにコメント書いたんだけど、読みました？コメントに書いてあるコードと質問に書いてあるコードが違うようですが、どちらについてコメントすればいいのか･･･。 document.getElementById が何のための関数かはご存知でしょうか。これは、HTMLのドキュメントのなかからIDを手がかりにHTML要素を取得するものです。id="save"となっているHTML要素は質問にあるコードには書かれていません。これもここに書いていないだけであるのでしょうか。

KyoheiTsuno

2016/08/07 14:10

無事解決しました！ var canvas = document.getElementById("save");　の部分を、 ("drawarea")にした所、表示されるようになりました。キーワードの指定方法がよく分かっていないので、関連付けなどをしっかり学びたいと思います。どうもありがとうございました！

行動規範の内容に同意します