如何将HTML5画布保存为服务器上的图像?

2022-08-30 00:08:11

我正在开发一个生成艺术项目,我希望允许用户从算法中保存生成的图像。一般的想法是:

  • 使用生成算法在 HTML5 画布上创建图像
  • 图像完成后,允许用户将画布作为图像文件保存到服务器
  • 允许用户下载图像或将其添加到使用该算法生成的片段库中。

但是,我被困在第二步。在Google的帮助下,我找到了这篇博客文章,这似乎正是我想要的:

这导致了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。但是,我仍然无法打开它,并且似乎没有将其格式化为图像。


答案 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();
    
  2. 通过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中的服务器端可以在这里找到):

答案 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']);
?>