2012/07/09

HTML5のcanvasで画像データの読み書き


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

// LocalStorageに保存する 

window.localStorage.setItem("saveKey", base64);
LocalStorageに保存したデータをCanvasに読み込む方法
// 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);
}

0 件のコメント: