相关疑难解决方法(0)

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

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

  • 使用生成算法在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);
}
Run Code Online (Sandbox Code Playgroud)

和相应的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);
}
?>
Run Code Online (Sandbox Code Playgroud)

但这似乎根本没有做任何事情.

更多谷歌搜索出现了这篇基于上一个教程的博客文章.差别不大,但也许值得一试:

$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, …
Run Code Online (Sandbox Code Playgroud)

javascript php ajax html5-canvas

239
推荐指数
6
解决办法
31万
查看次数

标签 统计

ajax ×1

html5-canvas ×1

javascript ×1

php ×1