最佳答案
如何将HTML5画布保存为服务器上的图像?
我在一个生成艺术项目上工作，我想让用户从算法中保存结果图像。大意是:
- 使用生成算法在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。但是，我仍然无法打开它，它似乎没有被格式化为图像。
