5

キャンバスがあり、ajax と php を使用してキャンバス コンテキストをサーバーにアップロードしたいと考えています。最終出力をサーバーに保存された画像にしたい。フォームを使用して画像をアップロードしました。しかし今、キャンバスコンテキストを取得して画像に変換し、サーバーにアップロードしたいと思います!

それで、どうすればそれを行うことができますか？提案、アルゴリズム、または解決策は大歓迎です!

4

1 に答える 1

11

このブログ投稿では、AJAX クエリを使用してキャンバスをサーバーに保存する方法を適切に説明しています。

var canvasData = testCanvas.toDataURL("image/png");基本的に、 JavaScript でキャンバスのコンテンツを取得するには が必要です。これは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 スクリプトではHTTP_RAW_POST_DATA、$GLOBALS配列に指定されたキーがあり、これにはフェッチしたばかりのデータが含まれます。

// 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保存するファイル名です。data:image/png;base64,最初の行は、後で でデコードできるように、エンコードされたイメージの一部を削除するために必要ですbase64_decode()。その出力 ( $decodedData) がファイルに保存されます。

于 2012-08-07T09:58:31.087 に答える