3

画像ギャラリーサイトがあり、ユーザーはjavascriptとHTML5キャンバスを介して画像を操作できます。操作した画像をサーバーに送り返してPHPで保存することはできますか？

4

2 に答える 2

4

ここでは、このテーマに関する完全な記事を見つけることができます。しかし、ここに短いバージョンとソースコードがあります：

まず、キャンバスのバイナリデータをbase 64でエンコードされた文字列として変換して、サーバーに送信する必要があります。

var image = canvas.toDataURL("image/png");

これをajax呼び出しで送信します：

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

最後に、PHPスクリプトsave.phpは次のようになります。

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    // Get the data
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

    // Remove the headers (data:,) part. 
    // A real application should use them according to needs such as to check image type
    $filteredData=substr($imageData, strpos($imageData, ",")+1);

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

    //echo "unencodedData".$unencodedData;

    // Save file.  This example uses a hard coded filename for testing,
    // but a real application can specify filename in POST variable
    $fp = fopen( 'test.png', 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );
}
?>

PHPスクリプトは、生の投稿データを解析し、base 64からbinaryに変換して、ファイルに保存します。Base 64の詳細については、このWikipediaの記事を参照してください。

于 2012-08-25T15:26:38.687 に答える
0

はい、canvasは画像データをBase64でエンコードされたデータURLまたはBlobとして返すことをサポートしています。http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-todataurlを参照してください。次に、データURLを取得し、AJAXを使用してサーバーに投稿し、そこでBase64でデコードできます。

于 2012-08-25T15:20:53.890 に答える