我有一个画布,我想使用ajax和php将画布上下文上载到服务器。我希望最终输出是存储在服务器上的图像。我已经使用表格完成了图片上传。但是现在我想获得canvas上下文,将其转换为图像并上传到服务器!
那么,我该怎么做呢?任何建议,算法或解决方案表示赞赏!
这篇博客文章恰当地描述了使用AJAX查询将画布保存到服务器上的方法,我想这应该适合您。
基本上,您需要使用var canvasData = testCanvas.toDataURL("image/png");JavaScript来检索画布的内容。这将是Base64编码的字符串,如下所示:data:image/png;base64,fooooooooooobaaaaaaaaaaar==。
var canvasData = testCanvas.toDataURL("image/png");
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数组中拥有一个名为key的键,其中将包含我们刚刚获取的数据。
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)将保存到文件中。
test.png
data:image/png;base64,
base64_decode()
$decodedData