如何使用 JavaScript 和 PHP 將 HTML5 Canvas 圖像儲存到伺服器？

如何將HTML5 Canvas 儲存為伺服器上的映像

當您尋求允許使用者儲存從HTML5 canvas 產生的映像時，你遇到了困難。為了解決這個問題，這裡有一個改進的方法：

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，它允許 multipart/form-data
3. 在 PHP 端，我們透過 POST 接受 canvasData 並提取實際的影像資料。
4. 我們創建一個可寫文件，並將解碼後的Base64 編碼圖像數據寫入

提示：

• 確保'/path/to/file.png' 具有適當的寫入權限。
• 如果映像顯示損壞或為空，請驗證 JavaScript 函數傳送的資料類型是否與 PHP 中的預期資料類型相符腳本。

以上是如何使用 JavaScript 和 PHP 將 HTML5 Canvas 圖像儲存到伺服器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！