JavaScript と PHP を使用して HTML5 キャンバス画像をサーバーに保存する方法

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

ユーザーが HTML5 キャンバスから生成された画像を保存できるようにするという目的、困難に遭遇しました。これを解決するための改善されたアプローチは次のとおりです:

JavaScript コード:

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

  formData.append("canvasData", canvasData);

  var ajax = new XMLHttpRequest();
  ajax.open("POST", "save-image.php", false);
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  };
  ajax.send(formData);
}

PHP コード(save-image.php):

if (isset($_POST["canvasData"])) {
  $data = $_POST["canvasData"];
  $uri = substr($data, strpos($data, ",") + 1);

  $fp = fopen('/path/to/file.png', 'wb');
  fwrite($fp, base64_decode($uri));
  fclose($fp);
}

内訳:

1. JavaScript 関数でキャンバス データを収集します。
2. 直接 XHR リクエストを使用する代わりに、マルチパート/フォームデータを可能にする FormData を利用します。
3. PHP 側では、POST 経由で CanvasData を受け取り、実際の画像データを抽出します。
4. 書き込み可能なファイルを作成し、デコードされた Base64 でエンコードされた画像データを

ヒント:

• 「/path/to/file.png」に適切な書き込み権限があることを確認してください。
• 画像が壊れているか空であるように見える場合は、JavaScript 関数によって送信されているデータ型が PHP で予期されるデータ型と一致していることを確認してください。スクリプト。

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