サーバーに保存するときに HTML5 キャンバス画像が破損するのはなぜですか?

HTML5 キャンバスをサーバーに画像として保存する際のトラブルシューティング

問題

オンライン チュートリアルに従った後、HTML5 キャンバスを画像として保存しようとしますサーバー上でファイルが破損したり空になったりすることがあります。原因は不明のままです。

解決策

１． XMLHttpRequest を正しく構成します:

• 古いブラウザと最新のブラウザの両方をサポートするには、カスタム XMLHttpRequest 作成を次のものに置き換えます:

var xmlHttpReq = false;
if (window.XMLHttpRequest) {
  ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  ajax = new ActiveXObject("Microsoft.XMLHTTP");
}

• コンテンツタイプからapplication/x-www-form-urlencoded:

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

2. PHP スクリプトを変更します:

• substr($imageData, strpos($imageData, ",")) を substr($imageData, strpos($imageData, ",")) 1 に変更します。 .
• ファイル ハンドルが有効かどうかを事前にチェックして、潜在的なエラーを処理します。書き込み:

if ($fp) {
  fwrite($fp, $unencodedData);
  fclose($fp);
}

改訂された JavaScript および PHP コード:

JavaScript

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var xmlHttpReq = false;

  if (window.XMLHttpRequest) {
    ajax = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }

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

PHP

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData = substr($imageData, strpos($imageData, ",")+1);
  $unencodedData = base64_decode($filteredData);

  if ($fp = fopen('/path/to/file.png', 'wb')) {
    fwrite($fp, $unencodedData);
    fclose($fp);
  }
}
?>

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