html5调用摄像头拍照上传,html5拍照上传服务器

　　在HTML5规范的支持下，WebApp用手机拍照已经成为可能下面我来解释一下Web App是如何用手机拍照，在页面显示，上传到服务器的

　　1.视频流

　　html媒体捕获API提供了对摄像机的可编程访问，用户可以直接使用getUserMedia来获取摄像机提供的视频流我们需要做的是添加一个HTML5视频标签，将从摄像头获取的视频作为这个标签的输入源(请注意，目前只有Chrome和Opera支持getUserMedia补充:请使用Opera支持新版HTML5如果是Chrome，版本应该是Chrome 18.0.1008，使用about:flags打开WebRTC请看下图)

　　视频流2，拍照

　　相机功能，我们用HTML5 Canvas实时抓取视频标签的内容，视频元素可以作为Canvas图像的输入，很棒主要代码如下:

　　3.图象采集

　　接下来，我们要从canvas中获取图片数据核心思想是用Canvas的toDataURL将Canvas的数据转换成base64 bit编码的PNG图像，类似于“data:image/PNG；base64，xxxxx

　　“的格式。

　　因为真实的图像数据是base64代码逗号之后的部分，所以我们实际服务器处理的图像数据应该是这部分，我们可以通过两种方式获取。

　　第一种是截取前端的22位字符串作为图像数据，例如：

　　如果您想在上传之前获取图片的大小，您可以使用：

　　第二种方法是在后端捕获传输的数据，用后台语言截取22位后的字符串。例如，在PHP中：

　　4.上传图片

　　在前端，可以使用Ajax将上面获得的图像数据上传到后台脚本。例如，使用jQuery时：

　　在后台，我们使用PHP脚本接收数据，并将其存储为图片。

　　请注意，以上解决方案不仅可以用于Web App照片上传，您还可以实现将画布输出转换为图片上传的功能。这样就可以使用Canvas为用户提供画板功能进行图像编辑，比如裁剪、上色、涂鸦等，然后将用户编辑好的图像保存到服务器上。

　　画布涂鸦功能

　　在HTML5的驱动下，Web App和Native App之间是否存在不可逾越的鸿沟？我会在3月23日的百度开发者大会上回答这个问题，敬请关注。

　　相关规格：

　　媒体捕获API:http://www.w3.org/TR/media-capture-api/

　　画布：http://dev.w3.org/html5/2dcontext/

　　媒体捕获的示例：

　　现场照相亭

　　拍立得相机

　　原创文章，请注明出处：姜玉洁专栏。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。