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

Question

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

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

Answer 1

这篇博文恰当地描述了使用 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 脚本中，您将有一个HTTP_RAW_POST_DATA在$GLOBALS数组中命名的键，这将包含我们刚刚获取的数据。

// 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) 将被保存到文件中。