ajaxとphpを使用してキャンバスコンテキストを画像としてアップロード

Question

私はキャンバスを持っており、ajaxとphpを使用してキャンバスコンテキストをサーバにアップロードします。私は最終的な出力をサーバーに保存された画像にしたい。私はフォームを使って画像をアップロードしました。しかし今、キャンバス・コンテキストをイメージに変換してサーバーにアップロードする必要があります。

どうすればいいですか？どんな提案、藻類や解決策もありがとう！

Answer 1

This blog post AJAXクエリを使用してキャンバスをサーバーに保存する方法をaptlyで説明していますが、これはあなたに合っているはずです。

基本的には、キャンバスの内容をJavaScriptで取得するにはvar canvasData = testCanvas.toDataURL("image/png");が必要です。これはBase64エンコードされた文字列です。data:image/png;base64,fooooooooooobaaaaaaaaaaar==のようになります。

次のコードは、AJAXのクエリは、HTMLに内容を送信してくださいます

：この意志、

var ajax = new XMLHttpRequest(); 
ajax.open("POST",'testSave.php',false); 
ajax.setRequestHeader('Content-Type', 'application/upload'); 
ajax.send(canvasData); 

サーバーでは、PHPスクリプトで、あなたは$GLOBALS配列にHTTP_RAW_POST_DATAという名前のキーを持っています私たちがちょうどフェッチしたデータを含みます。

// Remove the headers (data:,) part. 
$filteredData=substr($GLOBALS['HTTP_RAW_POST_DATA'], strpos($GLOBALS['HTTP_RAW_POST_DATA'], ",")+1); 

// Need to decode before saving since the data we received is already base64 encoded 
$decodedData=base64_decode($filteredData); 

$fp = fopen('test.png', 'wb'); 
fwrite($fp, $decodedData); 
fclose($fp); 

もちろん、test.pngは保存するファイル名です。最初の行は、base64_decode()で後でデコードすることができるように、符号化された画像の一部分であるdata:image/png;base64,を削除する必要があります。出力（$decodedData）がファイルに保存されます。