html保存画布,如何将HTML 5画布保存为服务器上的映像？

如何将HTML 5画布保存为服务器上的映像？

我正在从事一个生成艺术项目，我希望允许用户从算法中保存生成的图像。总的想法是：使用生成算法在HTML 5画布上创建图像

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

允许用户下载图像或将其添加到使用该算法生成的片段库中。

然而，我仍然停留在第二步。在谷歌的帮助下，我找到了这个博客帖子这似乎正是我想要的

这导致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)：<?phpif  (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;

这个程序创建了一个文件(Yay)，但是它已经损坏了，并且似乎不包含任何内容。它似乎也是空的(文件大小为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允许发送图像数据。

控制台返回base 64代码的(相当大的)字符串，数据文件为140 kB。然而，我仍然不能打开它，它似乎没有被格式化为一个图像。