如何将html5服务器,如何将HTML5画布另存为服务器上的图像？

我正在从事一个生成艺术项目，我希望允许用户从算法中保存生成的图像。总体思路是：

使用生成算法在HTML5 Canvas上创建图像

图像完成后，允许用户将画布作为图像文件保存到服务器

允许用户下载图像或将其添加到使用该算法制作的作品库中。

导致了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)：

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代码的(相当大的)字符串，并且数据文件约为140 kB。但是，我仍然无法打开它，并且它似乎没有被格式化为图像。