我有一个画布,我想使用ajax和php将画布上下文上载到服务器。我希望最终输出是存储在服务器上的图像。我已经使用表格完成了图片上传。但是现在我想获得canvas上下文,将其转换为图像并上传到服务器!
那么,我该怎么做呢?任何建议,算法或解决方案表示赞赏!
这篇博客文章恰当地描述了使用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
数组中拥有一个名为key的键,其中将包含我们刚刚获取的数据。
// 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
)将保存到文件中。
问题内容: 我对jQuery和Ajax函数还比较陌生,但是过去几天一直在使用Ajax表单。我在尝试上传图像时遇到文件上传问题。在寻找资源时,我找不到任何有用的东西,因为它们似乎过于复杂,毫无意义,没有任何解释,这无助于我进一步学习。 我已经编写了以下代码来处理Ajax中的图片上传: 这向文件发送了一个请求,但是没有发送数据,基本上我的表单实际上是这样的: 似乎没有任何数据在标头中传递,我认为我将通
问题内容: 使用AJAX上传多张图片时遇到很多问题。我写这段代码: 的HTML jQuery / AJAX 我尝试了各种版本,但从未成功通过ajax发送多个数据。我已经按照这种方式尝试了以上所见,现在我仅获得POST信息。我知道为什么会收到POST,但我需要发送FILES信息,而且我不知道我哪里写错了。 我不是第一次使用Ajax,经常在大多数项目中使用它,但是我从未使用过发送多个文件,这现在困扰着
问题内容: 我希望在用户使用$ .ajax在输入文件中选择文件时异步上传文件。但是接收调用返回索引的PHP未定义。jQuery代码是下一个: 以及调用该调用的php: 谢谢 问题答案: 您无法使用AJAX上传文件,但可以使用,因此不必刷新当前页面。 很多人都对插件束手无策,但您可以轻松完成此操作,并具有AJAX请求的所有功能。 不必使用AJAX函数,而是将表单提交到具有事件处理程序的隐藏文件中,以
问题内容: 我目前正在使用 http://paperjs.org 创建HTML5画布绘图应用程序。我想让用户将图像上传到画布中。我知道我需要进行登录和注册,但是有更简单的方法吗?我已经看到HTML5拖放式上传。 问题答案: 我假设您的意思是将图像加载到画布中,而不是从画布上载图像。 在这里阅读他们所有的画布文章可能是一个好主意 但基本上,您要做的是在javascript中创建图片,然后将image
问题内容: 我在stackoverflow和普通的Internet上都看过,找不到一个简单的AJAX文件上传器(仅表单提交)。我发现的那些不够灵活,不符合我的目的。如果我可以将此脚本用于文件上传,那就太好了: 在HTML中,我将拥有 谢谢 问题答案: 这是一个简单的ajax文件上传器 上载 如果您不想使用闪光灯,则可以使用此闪光灯。 AxUploader
问题内容: 我有一个表单,可以使用AJAX将图像上传到PHP脚本 这是我的表格 结果div是显示PHP输出的位置(请参见AJAX) 进度栏是我希望看到引导进度栏的地方。 这是我的AJAX 现在,我得到一个输出,向我显示PHP中回显的数据。但是由于某种原因,我无法使进度条正常工作。 可能是什么问题? 问题答案: 去除 解决了。但我现在需要看看如何重置标准。