上传画布上下文作为图像使用AJAX和PHP(uploading canvas context as

我有一个画布，我想用AJAX和PHP上传画布背景到服务器。我想最后的输出是存储在服务器上的图像。我一直在使用的形式进行图片上传。但现在我想在画布背景下将其转换为图像，并上传到服务器！

所以，我该怎么办呢？任何建议，交易算法或解决方案的感谢！

本博客文章恰如其分地描述了节约画布上用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 ）将被保存到文件中。