[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変換）