2

canvasとlocalstorageを使ったwebアプリケーションを作っているのですが、

canvas内に描いたデータをlocalstorageに出力して、そのデータを画像で表示するところまで行いたいと思っています。

色々調べてみるとbase64を使って、描いた絵を文字列として認識するのは分かり、
localstorageには、png型で記載されているのですが、いまいちそのデータを画像表示する書き方が分かりません。

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


$(window).on("load", function(){
	if(localStorage.getItem("save")){
		var base64 = localStorage.getItem("save")
		$("#drawarea").val(base64);
	}
});

canvasつまり"drawarea"にbase64にセーブしたデータを表示したいのですが、
これだとリロードしても表示されないままです。

どう記述するのが良いのか教えて欲しいです。

0

1 件の回答 1

1

toDataURLで得られる文字列データは、base64というよりData URI schemeで表現されたURLです。
これはそのままURLとして扱えますから、単にHTMLImageElementオブジェクトのsrcプロパティに設定すれば読み込むことができます。

// Data URLの書き出し
var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 200;
var g = canvas.getContext("2d");
g.fillStyle = "mediumblue";
g.fillRect(0, 0, 100, 200);
g.fillStyle = "crimson";
g.fillRect(200, 0, 100, 200);
var url = canvas.toDataURL(); 
localStorage.setItem("save", url);

// Data URLの読み込み
var img = new Image();
img.src = localStorage.getItem("save");
img.onload = function () {
    var drawarea = document.getElementById("drawarea");
    var g = drawarea.getContext("2d");
    g.drawImage(img, 0, 0);
};

https://jsfiddle.net/tc39v7ss/3/

4
  • なるほどです。 上記のようにsrcプロパティで同様に書いたところ canvas_base.htmlがnullで返ってきてしまい、imgが表示されずエラーになってしまっています。 どのような原因が考えられるでしょうか? 2015年8月11日 6:47
  • 失礼しました。 canvas_base.htmlにsaveされてはいるのですが、リロードした際に出ておりません。 いただいたurlのjsfiddleの方を見てみるとsaveされているimgが、 Dimensions 500×500なのですが、私の方では300×150となっています。 150のため上が切れていて見れないのかと思うのですが、どう問題になりますでしょうか? 2015年8月11日 6:55
  • ちなみにhtmlでは、 <canvas id="drawarea" width="500" height="500" style="border:1px solid black;"></canvas> と設定しています。 2015年8月11日 7:00
  • ちょっとコメントが全体的に何を言っているのかわかりません。整理すると (1)何らかのエラーが起きている (2)リロードしても期待したように表示されない (3)保存したいCanvasのサイズは500x500なのに、実際に保存された画像のサイズは300x150で、このサイズの違いが表示されない原因かもしれない 、ということでしょうか? これ以上コメントで不具合を明されても通じそうにありませんし、「百聞は一見にしかず」ですから、 スタックオーバーフロー上のコードスニペットなりjsFiddleなりで、 そのプログラム全体を示してもらうしかないでしょう。 canvasのタグの記述だけ抜粋して示されても、あまり回答の役には立ちません。 2015年8月11日 17:27

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

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。