為什麼我的 HTML5 Canvas 圖像保存到伺服器時會損壞？

在伺服器上將HTML5 Canvas 儲存為影像的疑難排解

問題

遵循線上教學課程後，請嘗試將HTML5 Canvas 儲存為圖片在伺服器上導致檔案損壞或空。原因尚不清楚。

解決方案

1.正確設定 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 Canvas 圖像保存到伺服器時會損壞？的詳細內容。更多資訊請關注PHP中文網其他相關文章！