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
が大変参考になるかと思います。

以上です。