如何用JavaScript和PHP将画布图像保存到服务器上？

var canvas = document.createElement('canvas');
canvas.width = 500; // 设置画布宽度
canvas.height = 500; // 设置画布高度
var ctx = canvas.getContext('2d');

// 在画布上绘制图像，这里只是一个简单的例子
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 获取图像的数据URL
var dataURL = canvas.toDataURL();

var xhr = new XMLHttpRequest();
xhr.open('POST', 'save_image.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理服务器的响应
    console.log(xhr.responseText);
  }
};

xhr.send('imageData=' + encodeURIComponent(dataURL));

<?php
if (isset($_POST['imageData'])) {
  $imageData = $_POST['imageData'];
  
  // 从数据URL中提取图像数据
  $encodedData = str_replace('data:image/png;base64,', '', $imageData);
  $decodedData = base64_decode($encodedData);
  
  // 生成一个唯一的文件名
  $filename = uniqid() . '.png';
  
  // 保存图像到服务器上的指定路径
  file_put_contents('path/to/save/' . $filename, $decodedData);
  
  echo '图像保存成功：' . $filename;
}
?>