【发布时间】：2013-09-09 06:30:27
【问题描述】：
我正在从事一个生成艺术项目，我希望允许用户保存通过算法生成的图像。总体思路是：
- 使用生成算法在 HTML5 画布上创建图像
- 图像完成后，允许用户将画布作为图像文件保存到服务器
- 允许用户下载图片或将其添加到使用该算法生成的图片库中。
但是，我被困在了第二步。在谷歌的一些帮助下，我找到了这个blog post，这似乎正是我想要的：
这导致了 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);
}
?>
但这似乎根本没有任何作用。
更多谷歌搜索出现了这个blog post，它基于上一个教程。差别不大，但也许值得一试：
$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。但是还是打不开，而且好像没有格式化成图片。
【问题讨论】：
-
您提供的第一篇博文使用
ajax.send(canvasData );，而您像ajax.send("imgData="+canvasData);一样使用它。因此$GLOBALS["HTTP_RAW_POST_DATA"]不是你所期望的，你应该使用$_POST['imgData']。 -
Diodeus：我已经在使用该线程中建议的技术；但是，他们未能提供有关实施的任何进一步细节，这就是我陷入困境的地方。
-
当我回显文件信息（第二个 php 代码中的
$data）时，我得到的只是一个空行。为什么会这样？似乎发送的数据可能不正确，但似乎我正在发送它，就像示例显示的那样...... -
可以通过使用PHP-FileUpload 及其
DataUriUpload组件来简化PHP 代码并使其更加健壮。它是documented here，并带有几种额外的验证和执行安全性的方法。
标签： javascript php ajax html5-canvas