使用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().它的output($decodedData)将保存到文件中.