Canvasに描いた画像をサーバに送信する

Canvas上で描いた絵は、クライアント上(つまりJavaScript)のcanvasオブジェクト
toDataURL()メソッドで画像として取得することができます。

今回は、Canvasに描いた絵を画像として取得し、Ruby on Railsのサーバに送信してみました。

この方法を用いれば、クライアント上でサインを署名し、サーバにて保存するようなアプリを
Webアプリとして実装できることになります。

以下、ソースです。

1.JavaScript

$("#save_button").click(function () {
data = canvas.toDataURL();
$.ajax({
type: 'post',
url: 'pictures/create',
data: {picture : data},
success: function(data){
$("#delete_button").click();
}
});
});
toDataURL()メソッドを使い、Canvas上に描いた絵(サイン)を取得しています。
取得した画像を、ajaxを用いてサーバに送信しています。

2.Railsのコントローラ

def create
data = Base64.decode64(params[:picture])

#この辺りで保存する。

#戻り値は適当。
render :json => nil
end

paramsより画像データを取得し、デコードしています。
デコードするのは、JavaScriptのtoDataURL()メソッドで取得したデータは
Base64エンコードされているためです。
後はコメントに書いたとおり、取得した画像データをサーバ内で保存すればいいと思います。

なお、画面のデザインや、Canvasを使用した絵を描く画面の作成については
[Web] スマートフォンとHTML5のCanvasを用いたお絵描きを実装してみた - YoheiM .NET
が大変参考になるかと思います。

以上です。