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

【问题标题】：uploading canvas context as image using ajax and php使用 ajax 和 php 将画布上下文作为图像上传
【发布时间】：2012-08-04 07:11:34
【问题描述】：

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

那么，我该怎么做呢？感谢任何建议、算法或解决方案！

【问题讨论】：

Uploading 'canvas' image data to the server的可能重复

标签： php ajax html file-upload canvas

【解决方案1】：

This blog post 恰当地描述了使用 AJAX 查询将画布保存到服务器上的方法，我想这应该适合你。

基本上，您需要var canvasData = testCanvas.toDataURL("image/png"); 才能在 JavaScript 中检索画布的内容。这将是一个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) 将被保存到文件中。

【讨论】：

@MJQ fopen() 接受它的 filename 参数，它也可能是一个文件路径。因此，如果您将test.png 更改为somefolder/test.png，它将以test.png 的文件名保存到somefolder。请小心，因为此方法会将 ALL 文件保存为 test.png，实际上是覆盖以前的保存。
我会推荐 file_get_contents('php://input') 而不是 HTTP_RAW_POST_DATA，IIRC 后者并不总是被填充。
@MJQ 很高兴能够提供帮助。 :) 另外，也要考虑@deceze 的评论。您需要将$GLOBALS['HTTP_RAW_POST_DATA'] 修改为$initialData 之类的变量，并在脚本的开头使用$initialData = file_get_contents('php://input'); 为该变量赋值。或者至少，在 $filteredData=... 行之前。
您的回答对 Whisperity 很有帮助，谢谢。我刚刚遇到了通过 PHP 处理服务器端数据的一个小问题：我必须将我的 ajax 请求的内容类型设置为“application/x-www-form-urlencoded”，并且一切都按预期工作。在此之前，我的图像文件已保存，但无法作为图像正确打开。