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

Question

如何将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。然而，我仍然不能打开它，它似乎没有被格式化为一个图像。

Answer 1

下面是一个如何实现所需内容的示例：1)&nbsp;画某事(取自画布教程)<canvas&nbsp;id="myCanvas"&nbsp;width="578"&nbsp;height="200"></canvas><script> &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;canvas&nbsp;=&nbsp;document.getElementById('myCanvas'); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;context&nbsp;=&nbsp;canvas.getContext('2d'); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;begin&nbsp;custom&nbsp;shape &nbsp;&nbsp;&nbsp;&nbsp;context.beginPath(); &nbsp;&nbsp;&nbsp;&nbsp;context.moveTo(170,&nbsp;80); &nbsp;&nbsp;&nbsp;&nbsp;context.bezierCurveTo(130,&nbsp;100,&nbsp;130,&nbsp;150,&nbsp;230,&nbsp;150); &nbsp;&nbsp;&nbsp;&nbsp;context.bezierCurveTo(250,&nbsp;180,&nbsp;320,&nbsp;180,&nbsp;340,&nbsp;150); &nbsp;&nbsp;&nbsp;&nbsp;context.bezierCurveTo(420,&nbsp;150,&nbsp;420,&nbsp;120,&nbsp;390,&nbsp;100); &nbsp;&nbsp;&nbsp;&nbsp;context.bezierCurveTo(430,&nbsp;40,&nbsp;370,&nbsp;30,&nbsp;340,&nbsp;50); &nbsp;&nbsp;&nbsp;&nbsp;context.bezierCurveTo(320,&nbsp;5,&nbsp;250,&nbsp;20,&nbsp;250,&nbsp;50); &nbsp;&nbsp;&nbsp;&nbsp;context.bezierCurveTo(200,&nbsp;5,&nbsp;150,&nbsp;20,&nbsp;170,&nbsp;80); &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;complete&nbsp;custom&nbsp;shape &nbsp;&nbsp;&nbsp;&nbsp;context.closePath(); &nbsp;&nbsp;&nbsp;&nbsp;context.lineWidth&nbsp;=&nbsp;5; &nbsp;&nbsp;&nbsp;&nbsp;context.fillStyle&nbsp;=&nbsp;'#8ED6FF'; &nbsp;&nbsp;&nbsp;&nbsp;context.fill(); &nbsp;&nbsp;&nbsp;&nbsp;context.strokeStyle&nbsp;=&nbsp;'blue'; &nbsp;&nbsp;&nbsp;&nbsp;context.stroke();</script>2)&nbsp;将画布图像转换为URL格式(Base 64)var&nbsp;dataURL&nbsp;=&nbsp;canvas.toDataURL();3)&nbsp;通过ajax将其发送到您的服务器。$.ajax({ &nbsp;&nbsp;type:&nbsp;"POST", &nbsp;&nbsp;url:&nbsp;"script.php", &nbsp;&nbsp;data:&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imgBase64:&nbsp;dataURL&nbsp;&nbsp;}}).done(function(o)&nbsp;{ &nbsp;&nbsp;console.log('saved');&nbsp; &nbsp;&nbsp;//&nbsp;If&nbsp;you&nbsp;want&nbsp;the&nbsp;file&nbsp;to&nbsp;be&nbsp;visible&nbsp;in&nbsp;the&nbsp;browser&nbsp; &nbsp;&nbsp;//&nbsp;-&nbsp;please&nbsp;modify&nbsp;the&nbsp;callback&nbsp;in&nbsp;javascript.&nbsp;All&nbsp;you &nbsp;&nbsp;//&nbsp;need&nbsp;is&nbsp;to&nbsp;return&nbsp;the&nbsp;url&nbsp;to&nbsp;the&nbsp;file,&nbsp;you&nbsp;just&nbsp;saved&nbsp; &nbsp;&nbsp;//&nbsp;and&nbsp;than&nbsp;put&nbsp;the&nbsp;image&nbsp;in&nbsp;your&nbsp;browser.});3)&nbsp;将base 64保存在服务器上作为映像(这里是如何在PHP中做到这一点在每一种语言中都有相同的想法。PHP中的服务器端可以是在这里发现的):

Answer 2

两周前我玩过这个，很简单。唯一的问题是，所有的教程都只是讨论如何在本地保存映像。我就是这样做的：1)我设置了一个表单，以便使用POST方法。2)当用户完成绘图时，可以单击“保存”按钮。3)当点击按钮时，我将图像数据放入隐藏字段。然后我提交表格。document.getElementById('my_hidden').value&nbsp;=&nbsp;canvas.toDataURL('image/png');document.forms["form1"].submit();4)当表单被提交时，我有一个小的php脚本：<?php&nbsp; $upload_dir&nbsp;=&nbsp;somehow_get_upload_dir();&nbsp; &nbsp;//implement&nbsp;this&nbsp;function&nbsp;yourself$img&nbsp;=&nbsp;$_POST['my_hidden']; &nbsp;$img&nbsp;=&nbsp;str_replace('data:image/png;base64,',&nbsp;'',&nbsp;$img);$img&nbsp;=&nbsp;str_replace('&nbsp;',&nbsp;'+',&nbsp;$img); &nbsp;$data&nbsp;=&nbsp;base64_decode($img);$file&nbsp;=&nbsp;$upload_dir."image_name.png"; &nbsp;$success&nbsp;=&nbsp;file_put_contents($file,&nbsp;$data);header('Location:&nbsp;'.$_POST['return_url']);?>