如何将 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);
}

6.在 PHP 服务器上

接收画布数据并将其作为 PNG 文件写入服务器：

<?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);
}
?>

附加说明：

• 将 /path/to/file.png 替换为您想要的文件
• 确保服务器目录可写。
• 如果需要，AJAX 请求头也可以设置为 multipart/form-data。
• 如果图片数据 URL包含非标准字符，请使用encodeURIComponent()对其进行转义。

以上是如何将 HTML5 Canvas 保存为服务器上的图像？的详细内容。更多信息请关注PHP中文网其他相关文章！