如何将 HTML5 Canvas 保存为服务器上的图像？

Question

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

• 使用生成算法在 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）。

我做错了什么真的很明显吗？我存储文件的路径是可写的，所以这不是问题，但似乎什么都没有发生，我不确定如何调试它。

编辑

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

原文由 nathan lachenmyer 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

1. 将画布图像转换为 URL 格式（base64）

 // script

 var dataURL = canvas.toDataURL();

1. 通过 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.
 });

1. 在您的服务器上将 base64 保存为图像（这是 在 PHP 中执行此操作的 方法，每种语言都有相同的想法。可以 在此处找到 PHP 中的服务器端）：

原文由 Salvador Dali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我两周前玩过这个，非常简单。唯一的问题是所有的教程都只是谈论在本地保存图像。我就是这样做的：

1）我设置了一个表单，所以我可以使用 POST 方法。

1. 用户绘制完成后，可以点击“保存”按钮。

3）单击按钮后，我获取图像数据并将其放入隐藏字段中。之后我提交表格。

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

1. 提交表单后，我有这个小的 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']);
?>

原文由 user568021 发布，翻译遵循 CC BY-SA 3.0 许可协议