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

將HTML5 畫布儲存為伺服器上的映像

要將HTML5 畫布儲存為伺服器上的映像，請依照下列步驟操作：

1。將畫布轉換為圖片資料 URL

var canvasData = canvas.toDataURL("image/png");

2.建立 XMLHttpRequest 物件

var ajax = new XMLHttpRequest();

3.開啟 POST請求並設定請求標頭

ajax.open("POST", "testSave.php", false);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

4.發送畫布資料

ajax.send("imgData=" + canvasData);

5.處理回應🎜>

ajax.onreadystatechange = function() {
  console.log(ajax.responseText);
}

5.處理回應🎜>

5.處理回應>

6.在PHP服務器上

<?php
if (!empty($_POST['imgData'])) {
  // Convert base64 data to raw data
  $imgData = base64_decode($_POST['imgData']);

  // Set path and open file
  $fp = fopen('/path/to/file.png', 'wb');

  // Write raw data to file and close
  fwrite($fp, $imgData);
  fclose($fp);
}
?>

接收畫布數據並將其作為PNG 文件寫入服務器：

• 附加說明：
• 將/path/to/file.png替換為您想要的檔案
• 確保伺服器目錄可寫入。

如果需要，AJAX 請求頭也可以設定為 multipart/form-data。 如果圖片資料 URL包含非標準字符，請使用encodeURIComponent()對其進行轉義。

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