如何将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) 画某事(取自画布教程)

<canvas id="myCanvas" width="578" height="200"></canvas><script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // begin custom shape
    context.beginPath();
    context.moveTo(170, 80);
    context.bezierCurveTo(130, 100, 130, 150, 230, 150);
    context.bezierCurveTo(250, 180, 320, 180, 340, 150);
    context.bezierCurveTo(420, 150, 420, 120, 390, 100);
    context.bezierCurveTo(430, 40, 370, 30, 340, 50);
    context.bezierCurveTo(320, 5, 250, 20, 250, 50);
    context.bezierCurveTo(200, 5, 150, 20, 170, 80);

    // complete custom shape
    context.closePath();
    context.lineWidth = 5;
    context.fillStyle = '#8ED6FF';
    context.fill();
    context.strokeStyle = 'blue';
    context.stroke();</script>

2) 将画布图像转换为URL格式(Base 64)

var dataURL = canvas.toDataURL();

3) 通过ajax将其发送到您的服务器。

$.ajax({
  type: "POST",
  url: "script.php",
  data: { 
     imgBase64: dataURL  }}).done(function(o) {
  console.log('saved'); 
  // If you want the file to be visible in the browser 
  // - please modify the callback in javascript. All you
  // need is to return the url to the file, you just saved 
  // and than put the image in your browser.});

3) 将base 64保存在服务器上作为映像(这里是如何在PHP中做到这一点在每一种语言中都有相同的想法。PHP中的服务器端可以是在这里发现的):

Answer 2

两周前我玩过这个，很简单。唯一的问题是，所有的教程都只是讨论如何在本地保存映像。我就是这样做的：

1)我设置了一个表单，以便使用POST方法。

2)当用户完成绘图时，可以单击“保存”按钮。

3)当点击按钮时，我将图像数据放入隐藏字段。然后我提交表格。

document.getElementById('my_hidden').value = canvas.toDataURL('image/png');document.forms["form1"].submit();

4)当表单被提交时，我有一个小的php脚本：

<?php 
$upload_dir = somehow_get_upload_dir(); 
 //implement this function yourself$img = $_POST['my_hidden'];
 $img = str_replace('data:image/png;base64,', '', $img);$img = str_replace(' ', '+', $img);
 $data = base64_decode($img);$file = $upload_dir."image_name.png";
 $success = file_put_contents($file, $data);header('Location: '.$_POST['return_url']);?>