canvasに描いた絵（画像）をサーバに保存

canvasに描かれたデータを取得するには、canvas.toDataURL() を使います。
toDataURL()で得られるのは、base64エンコードされた画像情報なので、
それをサーバに送って、base64デコードして保存という流れです。

toDataURL()して、そのデータをPOSTする部分のjavascript (ajax部分が面倒なので、prototype.jsを使用)

function saveImage() {
    var imgdata = $('canvas_id').toDataURL();  // デフォルトだとpng, 引数でjpegとかも可能
    imgdata = imgdata.replace('data:image/png;base64,', '');  // 頭のいらない部分を落とす

    new Ajax.Request(<画像保存CGIのURL>, {
        parameters: 'img=' + imgdata,  // 画像データを送信
        onComplete: function(res) {  // callback 別になくてもよいが。
            if (res.responseText != 'ok') alert('error');
        }
    });
}

サーバ側（画像保存CGI）

#!/usr/bin/perl

use strict;
use warnings;
use CGI;
use MIME::Base64;

my $q   = CGI->new;
my $img = $q->param('img');  # base64エンコードされた画像データを取得

my $res_msg = 'error';
if ($img) {
    open(my $fh, '>', 'image.png') or die $!;  # 保存するファイル名でopen
    print $fh MIME::Base64::decode($img);  # base64デコード
    close($fh);

    $res_msg = 'ok';
}

print "Content-type:text/plain\n\n";
print $res_msg;
exit;

これで、image.png にcanvasの画像が保存されます。

origin-clean flag

canvasにはセキュリティの面から、origin-cleanフラグというものが存在しているらしいです。
このフラグが false になっている場合、toDataURL()は「security error」となって、失敗します。

これに関する原文は、以下です。
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements

canvasは、最初はorigin-cleanフラグがtrueにセットされていますが、
いくつか特定のアクションをするとorigin-cleanフラグがfalseになります。

例えば、以前の記事 でやった画像の読み込み(drawImage)とかで、
その画像が canvasを表示しているページと同じドメインの画像なら toDataURL()できますが、
別ドメインの画像をcanvasに描画してしまうと、origin-cleanフラグがfalseになって、toDataURL()できなくなります。

なので、外部の画像を読み込ませて、お絵かきさせて、サーバで保存とかしたい場合は、
一度サーバ側で画像をダウンロードして、それをcanvasに描画する必要がありそうです。