HTML5 キャンバスを画像としてサーバーに保存するにはどうすればよいですか?

HTML5 キャンバスを画像としてサーバーに保存する

HTML5 キャンバスを画像としてサーバーに保存するには、次の手順に従います。

1.キャンバスを画像データ URL に変換します

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

2. XMLHttpRequest オブジェクトを作成します

var ajax = new XMLHttpRequest();

3. POST リクエストを開き、リクエスト ヘッダーを設定します

ajax.open("POST", "testSave.php", false);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

4.キャンバスデータの送信

ajax.send("imgData=" + canvasData);

5.ハンドル応答

ajax.onreadystatechange = function() {
  console.log(ajax.responseText);
}

6. PHP サーバー上で

キャンバス データを受信し、PNG ファイルとしてサーバーに書き込みます:

<?php
if (!empty($_POST['imgData'])) {
  // Convert base64 data to raw data
  $imgData = base64_decode($_POST['imgData']);

  // Set path and open file
  $fp = fopen('/path/to/file.png', 'wb');

  // Write raw data to file and close
  fwrite($fp, $imgData);
  fclose($fp);
}
?>

追加メモ:

• /path/to/file.png を目的のファイルに置き換えます
• サーバー ディレクトリが書き込み可能であることを確認してください。
• 必要に応じて、AJAX リクエスト ヘッダーを multipart/form-data に設定することもできます。
• 画像データ URL の場合標準以外の文字が含まれている場合は、encodeURIComponent() を使用してエスケープしてください。

以上がHTML5 キャンバスを画像としてサーバーに保存するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。