我正在进行一个生成艺术项目，我希望允许用户保存从一个算法得到的图像。大意是：

• 使用生成算法在HTML5画布上创建图像
• 完成映像后，允许用户将画布作为映像文件保存到服务器
• 允许用户下载图像或将其添加到使用该算法生成的图像库中。

然而，我却被卡在了第二步上。经过谷歌的一番帮助，我找到了这篇博文，似乎正是我想要的：

这导致了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/upload");
  ajax.send("imgData=" + canvasData);
}

和相应的PHP（testsave.PHP）：

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData = substr($imageData, strpos($imageData, ",") + 1);
  $unencodedData = base64_decode($filteredData);
  $fp = fopen('/path/to/file.png', 'wb');

  fwrite($fp, $unencodedData);
  fclose($fp);
}
?>

但这似乎根本起不了什么作用。

更多的谷歌搜索出现了这篇博文，它是基于上一篇教程的。差别不大，但也许值得一试：

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

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

这一个创建了一个文件（耶），但它被破坏了，似乎不包含任何东西。它似乎也是空的（文件大小为0）。

有什么明显的事情表明我做错了吗？我存储文件的路径是可写的，所以这不是一个问题，但似乎什么都没有发生，我不确定如何调试它。

在Salvidor Dali的链接之后，我将AJAX请求更改为：

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var xmlHttpReq = false;

  if (window.XMLHttpRequest) {
    ajax = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }

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

现在图像文件已经创建并且不是空的！似乎内容类型很重要，将其更改为x-www-form-urlencoded允许发送图像数据。

控制台返回（相当大的）base64代码字符串，数据文件为140KB。但是，我还是打不开它，它似乎没有被格式化为图像。