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

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

ジェネレーティブ アート プロジェクトでは、作成した画像をサーバーに保存する機能が必要になることがよくあります。関係する手順は次のとおりです:

1. HTML5 キャンバスでの画像の作成: 生成アルゴリズムを使用して、HTML5 キャンバスで画像を作成します。
2. キャンバスを画像としてサーバーに保存: キャンバスを画像として保存するには、JavaScript とPHP.

JavaScript コード:

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var ajax = new XMLHttpRequest();

  ajax.open("POST", "testSave.php", false);
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  ajax.send("imgData=" + canvasData);
}

PHP (testSave.php):

<?php
$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, base64_decode($uri));
echo $file;
?>

共通問題:

• 空または破損したファイル: ファイル パスが書き込み可能であり、JavaScript リクエストのコンテンツ タイプが「application/x-www」に設定されていることを確認してください。 -form-urlencoded."
• Base64 文字列:コンソールは、画像形式ではない大きな Base64 文字列を返します。
• 間違ったコンテンツ タイプ: Canvas.toDataURL() を呼び出すとき、コンテンツ タイプは「image/png」である必要があります。

追加ヒント:

• クロスオリジン リソース共有 (CORS) により、リクエストが完了できない場合があります。サーバー設定を確認してください。
• 画像ビューアを使用して、保存されたファイルを検証してください。

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