2010/03/02

[html 5][JavaScript][PHP]canvasで作った画像をダウンロードする

前回までのエントリーで簡単なペイントアプリの実装方法を紹介しましたが、その作った画像を保存できたらなーっと思い、ダウンロードするプログラムを実装しました。
さっそく、まずは、htmlとJavaScript側

<canvas id="draw_canvas"></canvas>
<form action="送信先のphpファイル"
method="POST"
name="frmMain"
>
<input type="hidden" name="paintdata" value="">
</form>

<script>
var paint_data = $("draw_canvas").toDataURL("image/png");
paint_data = paint_data.replace(/^.*,/, '');
var curFrm = document.frmMain.;
curFrm.paintdata.value = paint_data;
curFrm.submit();
return;
</script>

ここでのポイントは、toDataURLメソッドを使って、canvasタグの中のデータをpng形式のbase64データとして取得しているところ。

先頭部分にメタデータが付与されているので、次の行でreplaceを使ってその部分を削ぎ落としています。
(かつ、これは正規表現を使ってます。オライリーの本を読んでおいてよかった。。。)

データ形式についてですが、pngだけではなくて、jpegでも取得可能みたいです。
([javascript][canvas]<CANVAS>でお絵かき->DBに保存->PHPで表示->(゚Д゚)ウマーを参考にさせて頂きました。)

次にPHPサイドですが、以下のように実装しました。
$paintdata = $_POST["paintdata"];
$paintdata = base64_decode($paintdata);
$im = imagecreatefromstring($paintdata);
header('Content-Type: image/png');
header("Cache-control: no-cache");
header('Content-Disposition: attachment; filename="foo.png"');
imagepng($im);
imagedestroy($im);

実行してみたところ、正常に動作しました。
header('Content-Disposition: attachment; filename="foo.png"');
を入れないと、画像がブラウザ上に展開されていまうので、気をつけたいところ。

次は、メールに画像を添付して送信できる機能みたいなのをつけたいなーっと。


他の参考サイト
[JavaScript] dataスキームURI生成(画像データのBase64変換)

0 コメント:

コメントを投稿