在HTML5规范的支持下,WebApp在手机上拍照已经成为可能。在下面,我将讲解Web App如何用手机进行拍照,显示在页面上并上传到服务器。
1、 视频流
HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签,并将从摄像头获得视频作为这个标签的输入来源(请注意目前仅Chrome和Opera支持getUserMedia)。
-
<videoid="video"autoplay=""></video>
-
<script>
- varvideo_element=document.getElementById('video');
- if(navigator.getUserMedia){//operashoulduseopera.getUserMedianow
- navigator.getUserMedia('video',success,error);
- }
- functionsuccess(stream){
-
video_element.src=stream;
- }
-
</script>
2、拍照
拍照功能,我们采用HTML5的Canvas实时捕获Video标签的内容,Video元素能作为Canvas图像的输入,这一点很棒。主要代码如下:
-
<script>
- varcanvas=document.createElement('canvas');
-
- varctx=canvas.getContext('2d');
- varcw=vw;
- varch=vh;
-
ctx.fillStyle="#ffffff";
- ctx.fillRect(0,0,cw,ch);
- ctx.drawImage(video_element,0,0,vvw,vvh,0,0,vw,vh);
- document.body.append(canvas);
-
</script>
3、图片获取
下面我们要从Canvas获取图片数据,其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像,类似于“data:image/png;base64,xxxxx”的格式。
- varimgData=canvas.toDataURL("image/png");
因为真正图像数据是base64编码逗号之后的部分,所以我们实际服务器处理的图像数据应该是这部分,我们可以用两种办法来获取。
第一种:是在前端截取22位以后的字符串作为图像数据,例如:
- vardata=imgData.substr(22
如果要在上传前获取图片的大小,可以使用:
- varlength=atob(data).length;//atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding
第二种:是在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里:
- $image=base64_decode(str_replace('data:image/jpeg;base64,','',$data);
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时:
- $.post('upload.php',{'data':data});
在后台我们用PHP脚本接收数据并存储为图片。
- functionconvert_data($data){
- $image=base64_decode(str_replace('data:image/jpeg;base64,','',$data);
- save_to_file($image);
- }
- functionsave_to_file($image){
- $fp=fopen($filename,'w');
- fwrite($fp,$image);
- fclose($fp);
- }
请注意,以上的解决方案不仅能用于Web App拍照上传,并且你可以实现把Canvas的输出转换为图片上传的功能。这样你可以使用Canvas为用户提供图片编辑,例如裁剪、上色、涂鸦的画板功能,然后把用户编辑完的图片保存到服务器上。
在HTML5的驱动下,Web App与Native App之间是否还有不可逾越的鸿沟?
分享到:
相关推荐
html5+教程:使用HTML5实现拍照上传应用教程,是一个很不错的html5语言教程,有兴趣的伙伴们抽时间可以看一下把。
利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Camera模块管理设备的摄像头,可用于拍照、摄像操作,通过plus.camera获取摄像头管理对象。Gallery模块管理系统...
项目使用环境以及工具: Eclipse,JDK1.7,struts2,HTML5,Jquery,...HTML5技术支持WebApp在手机上拍照,显示在页面上并上传到服务器。这是手机微博应用中常见的功能,当然你也可以在其它类型应用中适当使用此技术。
虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢,图片压缩。受以前PC上的开发思维影响,尼玛js哪有权限去操作文件,哪有资格压缩图片啊,搞不了,你们客户端去整吧。...
最近在做一个移动端HTML5的应用,使用到了上传功能,起初使用传统的上传方式上传手机拍照的照片,由于手机拍照出来的照片一般都是好几MB,所以上传速度是非常慢的。 在网上找了很久找到了localResizeIMG压缩框架,...
最近在做一个chrome app的云相机应用,应用包括拍照、摄像、保存照片视频、上传文件等等核心功能,其中涉及到很多HTML5对媒体流相关的API。写这篇文章的目的,其一是总结梳理知识点,最重要是希望对有相关需求的读者...
7.10 实现相机拍照功能 7.10.1 实现原理 7.10.2 编程思想 7.10.3 具体实现 7.11 自制3gp影片播放器 7.12 小结 第8章 网络编程 8.1 http参数传递 8.2 浏览网页 8.3 使用html代码 8.4 用浏览器打开网页 8.5 将网络照片...
我们今天要讲的是如何使用javascript和PHP实现一个简单的在线拍照并上传的功能。 实现这个功能的前提是你的电脑设备上需要安装有摄像头设备,以及你的浏览器需要支持flash <!DOCTYPE HTML> <html> <...
3> 服务与语音刻录(实现电话监听)、使用AIDL实现进程通信 4> 音乐播放器 5> 视频播放器 第七天 1> 拍照 2> 视频录制 3> 手势识别 4> 国际化(文字、图片)、屏幕适配、样式与主题 5> 编码实现软件界面 第八天 ...
并且可以使用手机摄像头对事件发生的现场进行拍摄并同步上传至视频网站,网友可以实时观看现场发生的一切,使用该软件,每个手机用户都成为视频网站或电视媒体的现场记者。本软件包含手机客户端和服务器端软件,...
该网络应用程序允许用户上传本地图像或照片,之后将对图像进行详细说明。 结果将是图像内的内容。 技术/框架 前端: 语言:HTML,Sass,JavaScript。 捆绑包:Webpack 后端: 语言:Python。 框架:Django。 ...
见 结合的产品使医生能够使用手机为患者拍照,并将图像直接传输到其PC或服务器上的特定文件夹中。 在拍摄照片之前,立即使用患者ID标记该图像。 安装此软件包的最常见方法是使用互联网连接的PC作为“代理”(通常...
本书以Android应用程序的开发为主题,并结合真实的案例向读者详细介绍了Android的基本组件的使用及应用程序开发的整个流程。本书的讲述由浅入深,实例全面并典型,几乎囊括了所有和Android应用相关的项目。全书分为...
5.上传模块 无刷新、批量、进度条控制多文件Flash上传全新体验 6.摄像头拍照 在家里、网吧随时能用摄像头拍照您的酷照 7.博客 简易的排版、批量添加图片到您的博客 8.扩展模块 您可以轻松添加您的SNS或Html等...
新增HTML5手机应用程序范例。影音功能大突破,领先业界的影音播放功能详解。易于阅读的架构设计,边看边学,每个范例均搭配步骤及完成画面。每个范例后面均有扩展学习,在学习范例应用的同时延伸思考。汲取专家经验...
28_网络通信之通过HTTP协议实现文件上传.avi 所在项目:newsmanage & Web端应用:web 29_发送xml数据和调用webservice.avi 所在项目:mobileAddressQuery & Web端应用:web 30_多线程下载原理.avi 所在项目:net 31_...
28_网络通信之通过HTTP协议实现文件上传.avi 所在项目:newsmanage & Web端应用:web 29_发送xml数据和调用webservice.avi 所在项目:mobileAddressQuery & Web端应用:web 30_多线程下载原理.avi 所在项目:net 31_...
28_网络通信之通过HTTP协议实现文件上传.avi 所在项目:newsmanage & Web端应用:web 29_发送xml数据和调用webservice.avi 所在项目:mobileAddressQuery & Web端应用:web 30_多线程下载原理.avi 所在项目:net 31_...
新增HTML5手机应用程序范例。影音功能大突破,领先业界的影音播放功能详解。易于阅读的架构设计,边看边学,每个范例均搭配步骤及完成画面。每个范例后面均有扩展学习,在学习范例应用的同时延伸思考。汲取专家经验...