[HTML5] Canvasの内容をLocalStorageで保存／読み込み

HTML5のCanvasを用いて、絵を描くWebアプリケーションを前に作りました。
そのお絵描きWebアプリケーションに、HTML5のLocalStorageを利用した 一時保存機能を追加しました。
今回はその実現方法をブログに残しておきたいと思います。


http://www.yoheim.net/labo/html5/canvas/freeHandWrite2.html

Canvasの内容をLocalStorageに保存する

Canvasでは、内容をbase64エンコーディングすることで、文字列をして取得出来ます。
それで取得した文字列をLocalStorageに保存する。

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

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

base64とは、データを6bit毎に分割し、それを64種類の文字に変換します。 詳細は、http://ja.wikipedia.org/wiki/Base64を参照ください。
以下のような、データがCanvas.toDataURL()で取得出来ます。

image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAA

LocalStorageに保存したデータをCanvasに読み込む

base64エンコーディングされた画像データは、以下の手順を踏む事で、Canvasに取り込むことが出来ます。
１、Imageオブジェクトを作成して、src属性にbase64のデータを設定する。
２、画像の読み込みが終了したら、canvasにImageを読み込む。
以下のようなソースコードで実現出来ます。

// 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);
}

最後に

画像データを文字列にすることで、データ保存やデータ転送など扱いやすくなりますね。 ただ、base64を用いるとデータ容量が増大してしまう問題点がありますが。
今後もCanvasを便利に使える事を色々と調べてみよっと♪(´ε｀ )