如何使用 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中文网其他相关文章！