使用ajax和php上传画布上下文作为图像

Question

我有一个画布，想使用ajax和php将画布上下文上传到服务器。我希望最终输出的是存储在服务器上的图像。我已经使用表单进行了图像上传。但是现在我想获取画布上下文，将其转换为图像并上传到服务器！

那么，我该如何做呢？欢迎提供任何建议、算法或解决方案！

- MJQ

---

可能是将“画布”图像数据上传到服务器的重复问题。 - user657496

Answer 1

这篇博客文章很好地描述了使用AJAX查询将画布保存到服务器的方法，我想这对你应该很合适。

基本上，您需要使用JavaScript中的var canvasData = testCanvas.toDataURL("image/png");来检索画布的内容。这将是一个Base64编码的字符串，类似于这样：data:image/png;base64,fooooooooooobaaaaaaaaaaar==。

以下代码将确保AJAX查询将内容发送到HTML：

var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData);

在服务器端的 PHP 脚本中，你会在 $GLOBALS 数组中有一个名为 HTTP_RAW_POST_DATA 的键，其中包含我们刚刚获取的数据。

// Remove the headers (data:,) part.
$filteredData=substr($GLOBALS['HTTP_RAW_POST_DATA'], strpos($GLOBALS['HTTP_RAW_POST_DATA'], ",")+1);

// Need to decode before saving since the data we received is already base64 encoded
$decodedData=base64_decode($filteredData);

$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $decodedData);
fclose( $fp );

当然，test.png是您要保存的文件名。第一行代码需要删除编码图像中的data:image/png;base64,部分，以便稍后可以通过base64_decode()进行解码。其输出（$decodedData）将保存到文件中。

- Whisperity

---

@MJQ fopen() 接受 filename 参数，该参数可以是文件路径。因此，如果你将 test.png 改为 somefolder/test.png，它将保存在 somefolder 目录下，并以 test.png 作为文件名。请注意，这种方法会将所有文件保存为 test.png，实质上是覆盖了之前的保存内容。 - Whisperity

我建议使用file_get_contents('php://input')代替HTTP_RAW_POST_DATA，因为我记得后者并不总是有值。 - deceze

@MJQ 很高兴能够帮忙。 :) 同时，请考虑 @deceze 的评论。您需要将 $GLOBALS['HTTP_RAW_POST_DATA'] 修改为变量，例如 $initialData，并在脚本的开头使用 $initialData = file_get_contents('php://input'); 为此变量赋值。或者至少在 $filteredData=... 行之前。 - Whisperity

你的回答非常有用，Whisperity，非常感谢。我刚遇到一个使用PHP处理服务器端数据的小问题：我必须将我的ajax请求的内容类型设置为“application/x-www-form-urlencoded”，这样一切都按预期工作。在这样做之前，我的图像文件已保存但无法正确打开为图像。 - Torsten Barthel