我在一个生成艺术项目上工作，我想让用户从算法中保存结果图像。大意是:

使用生成算法在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):

<?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)。

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

Edit

下面是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。但是，我仍然无法打开它，它似乎没有被格式化为图像。

如何自动缩放HTML5 <canvas>元素以适应页面?

例如，我可以得到一个<div>通过设置高度和宽度属性为100%缩放，但一个<canvas>不会缩放，会吗?

动态创建元素并能够移动它们的最佳方法是什么?例如，假设我想创建一个矩形、圆和多边形，然后选择这些对象并移动它们。

我知道HTML5提供了三个元素，可以使这成为可能:svg, canvas和div。对于我想做的事情，这些元素中哪一个将提供最佳性能?

为了比较这些方法，我想创建三个视觉上相同的网页，每个网页都有一个页眉、页脚、小部件和文本内容。第一个页面中的小部件将完全使用canvas元素创建，第二个页面完全使用svg元素创建，第三个页面使用普通div元素、HTML和CSS创建。

在尝试了合成操作和在画布上绘制图像后，我现在试图删除图像和合成。我怎么做呢?

我需要清除画布重绘其他图像;这可能会持续一段时间，所以我不认为每次都画一个新的矩形是最有效的选择。