如何將 HTML5 Canvas 圖像儲存到伺服器？-js教程-PHP中文網

如何將 HTML5 Canvas 圖像儲存到伺服器？

Patricia Arquette

發布： 2024-12-03 15:43:14

原創

972 人瀏覽過

How to Save an HTML5 Canvas Image to a Server?

將 HTML5 Canvas 儲存為伺服器上的圖片

產生藝術專案通常需要能夠將建立的圖片儲存到伺服器。以下是涉及的步驟：

在 HTML5 Canvas 上建立圖片： 使用生成演算法在 HTML5 Canvas 上建立圖片。
將畫布儲存為影像至伺服器：若要將畫布儲存為影像，請使用JavaScript 和PHP.

JavaScript 程式碼：

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

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

登入後複製

PHP (testSave.php):

<?php
$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, base64_decode($uri));
echo $file;
?>

登入後複製

常見問題：

空白或損壞的檔案： 確保檔案路徑可寫入且JavaScript 請求中的內容類型設定為“application/x-www” -form-urlencoded."
Base64 String: 控制台傳回一個大的base64字串，不是圖片格式。
內容類型錯誤：呼叫canvas.toDataURL()時內容類型應為「image/png」。

額外提示：

跨域資源共享(CORS) 可能會阻止請求完成。驗證已儲存的文件。

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