HTML5のcanvasで描いた内容をサーバーで保

質問

phpとjavascriptでcanvasに絵を描くことをしましたが、
クライアント側でなくサーバー側で保存できるようにしたいです。
ご回答お願いします。

回答No.1

神崎 渉瑠（@taloo）

toDataURL()を使うとpngやjpegで取得できます。
それをXHRで送信し、サーバー側のプログラムで保存するだけです。

と、言葉で言えば簡単ですが、
XHRで送信するときにmultipart/form-dataにしないと行けないということと、
ほとんどのブラウザは標準的な方法でXHRでバイナリデータを送信できません。
そのため、バイナリデータ専用のブラウザごとのメソッドを利用するか、escape()などで文字列に変換しておいた物を送信し、
サーバー側で戻す処理が必要です。

※sendAsBinary()はGeckoが対応しているメソッドです。

var cvs = document.getElementById("the_canvas");
var png = cvs.toDataURL("image/png"); // このデータが画像そのもの

//png=escape(png); // バイナリデータをテキストデータに変換。sendAsBinary()使用時は不要

var xhr= new XMLHttpRequest();
中略
var the_data=（multpart/form-data形式で生成したpngを含むデータ）
xhr.sendAsBinary(the_data);