HTML5轻松实现拍照上传功能[转载]

分享到:

转载 http://www.18sucai.com/article/275.htm

传统方法如果想实现拍照功能,需要后台应用程序复杂的编写,但随着html5的发展,在HTML5规范的支持下,Web App已经实现了手机上拍照功能,完全是使用HTML5技术完成。在下面,我将为大家讲解Web App如何用手机进行拍照,显示在页面上并上传到服务器。

首先拍照肯定是视频流,HTML5中已经可以实现获取视频流,主要使用getUserMedia()方法。

1、 HTML5获取视频流

HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签,并将从摄像头获得视频作为这个标签的输入来源(请注意目前仅Chrome和Opera支持getUserMedia)。

XML/HTML Code复制内容到剪贴板
<videoidvideoid=”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中拍照

拍照功能,我们采用HTML5的Canvas实时捕获Video标签的内容,Video元素能作为Canvas图像的输入,这一点很棒。主要代码如下:

JavaScript Code复制内容到剪贴板
var canvas=document.createElement('canvas');    
var ctx=canvas.getContext('2d');
var cw=vw;
var ch=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);

3、HTML5获取图片

下面我们要从Canvas获取图片数据,其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像,类似于“data:image/png;base64,xxxxx”的格式。

JavaScript Code复制内容到剪贴板
var imgData=canvas.toDataURL(“image/png”);  
因为真正图像数据是base64编码逗号之后的部分,所以我们实际服务器处理的图像数据应该是这部分,我们可以用两种办法来获取。

第一种:是在前端截取22位以后的字符串作为图像数据,例如:

JavaScript Code复制内容到剪贴板
var data=imgData.substr(22);  
如果要在上传前获取图片的大小,可以使用:

JavaScript Code复制内容到剪贴板
var length=atob(data).length;//atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding  
第二种:是在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里:

JavaScript Code复制内容到剪贴板
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

4、HTML5上传图片

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

JavaScript Code复制内容到剪贴板
$.post(‘upload.php’,{‘data’:data});  
 在后台我们用PHP脚本接收数据并存储为图片。

JavaScript Code复制内容到剪贴板
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为用户提供图片编辑,例如裁剪、上色、涂鸦的画板功能,然后把用户编辑完的图片保存到服务器上。

昵    称:
验证码:

相关文档:

  • 39个让你受益的HTML5教程
    闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们能够帮助大家更好地学习HTML5.好人啊!只是,作者原来说的40个仅仅有39个...
  • 一款基于HTML5 Canvas的画板涂鸦动画
    今天给各网友分享一款基于HTML5Canvas的画板涂鸦动画。记得之前我们分享过一款HTML5Canvas画板工具,可以切换不同的笔刷,功能十分强大...
  • 【PHP开发】国外程序员收集整理的 PHP 资源大全
    ziadoz在Github发起维护的一个PHP资源列表,内容包括:库、框架、模板、安全、代码分析、日志、第三方库、配置工具、Web工具、书籍、电...
  • Flash学习初总结
    话说尝试了一周多的Flash编程,有些理解为什么很多程序员都不喜欢用Flash编程了。 首先,就是没有编程的难度,想要编好Flash,也就是...
  • 分享12款经典时尚的HTML5应用
    分享伟大,呵呵。今天给大家分享一下收集的12个HTML5小特效。 我整理一下源码,给大家打包一下,我博客园上传文件大小有限,传不了...
  • 用HTML5构建一个流程图绘制工具
    在我们的开发工程中经常会使用到各种图,所谓的图就是由节点和节点之间的连接所形成的系统,数学上专门有一个分支叫图论(GraphTher...
  • Html5使用SVG实现矢量图形
    SVG 指可伸缩矢量图形 (Scalable Vector Graphics);SVG 用于定义用于网络的基于矢量的图形;SVG 使用 XML 格式定义图形;SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失...
  • APP定制 HTML5开发 手机软件开发 Xamarin软件开发
    电子书app软件开发 移动互联网时代媒体在改变,同时企业也在改变。上海诸君http://www.uniguyit.comApp软件开发公司专家表示移动互联网领域...
  • html5的onhashchange和history历史管理
    html5的onhashchange和history历史管理...
  • HTML5视音频小结
    目前,大多数视频是通过插件(比如Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频...
  • HTML5之 离线数据存储
    ---Storage接口无论是sessionStorage还是localStorage 属性/方法 返回值 描述-------------------------------------------------------length integer 包含对象数目...
  • html文档类型
    html文档类型的作用 是用来定义文档中所使用的标签的,也就是给你在文档中所要用到的所有标签先声明父子关系,然后在文档中按照定...
  • 【HTML5】HTML5 综合
    HTML5教程: 视频教程:http://www.socss.cn/html5视频教程大集合/ DCloud关于HTML5:http://ask.dcloud.net.cn/docs 开发工具:HBuilder飞一样的编码 HTML5应...
  • HTML中head头结构详情总结
    HTMLhead头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签...
  • HTML5 canvas 在线画笔绘图工具(四)
    HTML5画图命令 图形的绘制是由TDrawHandler与TCommand协同工作完成。 TDrawHandler需要完成以下工作 1、聚集类用于管理绘图的命令TCommand 2、管理...
  • HTML5 AJAX history.pushState
    引入history.pushState的来龙去脉 大家都知道web2.0以来,大家都喜欢使用ajax来请求数据,提高用户体验,但是传统的ajax可以无刷新改变页面...
  • HTML5+JS 《五子飞》游戏实现(五)移动棋子
    上一章我们知道了怎么处理两个重要的吃棋动作,想要吃对方的棋子,首先得移动自己的棋子。现在里沃特跟大家分享分享,怎么移动棋...
  • Hybrid开发之——localStorage存储
    1.localStorage存储数组。 localStorageonlysupportsstrings.UseJSON.stringify()andJSON.parse(). varnames=[]; names[0]=prompt("Newmembername?"); localStorage...
  • HTML实现文件拖动上传
    在大型企业的开发过程中,很多比较有趣而实际的功能往往都是让大家望而却步,我给大家带来一个百度云盘和360云盘的HTML5多文件拖动...
  • Head First HTML与CSS阅读笔记(二)
    上一篇HeadFirstHTML与CSS阅读笔记(一)中总结了《HeadFirstHTML与CSS》前9章的知识点,本篇则会将剩下的10~15章内容进行总结,具体如下所示...