我正在从事一个生成艺术项目,我希望允许用户从算法中保存生成的图像。总体思路是:
- 使用生成算法在HTML5 Canvas上创建图像
- 图像完成后,允许用户将画布作为图像文件保存到服务器
- 允许用户下载图像或将其添加到使用该算法制作的作品库中。
但是,我坚持第二步。在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);
}
?>
但这似乎根本不起作用。
More Googling打开了此博客文章,该文章基于先前的教程。差别不大,但也许值得一试:
$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。但是,我仍然无法打开它,并且它似乎没有被格式化为图像。
$data
在第二个php代码中)时,我得到的只是空白行。为什么会这样呢?似乎正在发送的数据不正确,但似乎我正在像示例所示发送它……
ajax.send(canvasData );
时使用的第一个博客帖子ajax.send("imgData="+canvasData);
。因此$GLOBALS["HTTP_RAW_POST_DATA"]
不会达到您的期望,您应该使用$_POST['imgData']
。