如何使用HTML5实现利用摄像头拍照上传功能
如何使用HTML5实现利用摄像头拍照上传功能
（为便于阅读，对原文进行了不失原意的适当修改，包括代码中一些错误的重复，并作了注释）
　　HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。
　　1、 视频流
　　HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia
（请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
&video id=”video” autoplay=”"&&/video& &script& var video_element=document.getElementById(‘video’); if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow &&&&& navigator.getUserMedia(‘video’,success,error);& //success是回调函数,当然你也可以直接在此写一个匿名函数} function success(stream){ &&&& video_element.src= } &/script&
此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。
　　2、 拍照
　　拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：
var canvas=document.createElement(‘canvas’); //动态创建画布对象var ctx=canvas.getContext(’2d’); var cw=vw,ch= ctx.fillStyle=”#ffffff”; ctx.fillRect(0,0,cw,ch); ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。document.body.append(canvas);
　　3、 图片获取
　　从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
　　第一种：是在前端截取22位以后的字符串作为图像数据，例如：
var data=imgData.substr(22);
　　如果要在上传前获取图片的大小，可以使用：
var length=atob(data). //atob 可解码用base-64解码的字串
　　第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/base64,’,”,$data);
　　4、 图片上传
　　在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：
$.post(‘upload.php’,{‘data’:data});
在后台我们用PHP脚本接收数据并存储为图片。
function convert_data($data){ &&&& $image=base64_decode(str_replace(‘data:image/base64,’,”,$data); &&&& save_to_file($image); } function save_to_file($image){ &&& $fp=fopen($filename,’w'); &&& fwrite($fp,$image); &&& fclose($fp); }
　　以上的解决方案不仅能用于Web App拍照上传，也可以通过Canvas的编辑功能函数提供图片编辑，例如裁剪、上色、涂鸦、圈点等功能，然后把用户编辑完的图片上传保存到服务器上。
　　在还在不断补充修正的HTML5的驱动下，Web App与Native App之间的距离将越来越小。在可预见的不远的未来，越来越多老的和新的开发项目必将会迁移到WEB应用上来。
相关规范：
The MediaCapture API：
本文转自:&并进行了排版和内容上的一些适当修改。
发表评论：
TA的最新馆藏[转]&[转]&html5概念啥的就不废话了，不知道的 百度， 谷歌一堆。。今天学了学html5中的Canvas结合新增的&video&标签来获取本地摄像头，在html5之前，要在浏览器获取本地摄像头只有通过插件（ActiveX，但是这种只有IE支持）或者是flash来获取（或许你没学过flash那就很坑爹了），在之后微软的silvertlight中也可以获取，但这些都比较麻烦，在html5的世界里，要获取本地摄像头，只要配合js就可以轻松获取。。
目前支持html5的浏览器（参考）
看看主要代码吧：
这个是前台HTML的代码。
&div id=&contentHolder&&& && &&
&video id=&video& width=&320& height=&320& autoplay&
&/video&& && &&
&button id=&snap& style=&display:none&& 拍照&/button&& && &&&
&canvas style=&display:none& id=&canvas& width=&320& height=&320&&
&/canvas&&
下面这个是主要代码了。（jquery）
&script&& &&&
&&//判断浏览器是否支持HTML5 Canvas& && && &&&
window.onload = function () {& && && &&
& &&&try {& && && && && && &&
//动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持& && && && && && & document.createElement(&canvas&).getContext(&2d&);& && &&&
& && && &&&document.getElementByIdx(&support&).innerHTML = &浏览器支持HTML5 CANVAS&;& && && &
& && &}& && && &&
& &&&catch (e) {& && && &&&
& && &&&document.getElementByIdx(&support&).innerHTML = &浏览器不支持HTML5 CANVAS&;& && &&
& && &&&}& && && && && &&
& &&&};& && && && && &&
& &&&//这段代 主要是获取摄像头的视频流并显示在Video 签中& && && &&&
window.addEventListener(&DOMContentLoaded&, function () {& && && && &
& &var canvas = document.getElementByIdx(&canvas&),& && && && &&&
& &&&context = canvas.getContext(&2d&),& && && && && &&
& &video = document.getElementByIdx(&video&),& && && &&
& && && &videoObj = { &video&: true },& && && && &&
& && &errBack = function (error) {& && && &&&
& && && && &console.log(&Video capture error: &, error.code);& &&
& && && && && &};& && && && && &
& & //navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow& && &&
& && &&&if (navigator.getUserMedia) {& &&&
& && && && &&&navigator.getUserMedia(videoObj, function (stream) {
& && && && && && && &&&video.src =& && && && && &&
& && & video.play();& && &
& && && && & }, errBack);& && && &&&
& & } else if (navigator.webkitGetUserMedia) {& && &&&
& && && &&&navigator.webkitGetUserMedia(videoObj, function (stream) {& && && &&
& && && && & video.src = window.webkitURL.createObjectURL(stream);& && && &&&
& && && && &video.play();& && && &&&
& && &&&}, errBack);& && && &&&
& & }& && && &
& && &//这个是拍照按钮的事件，& && && &&
& &&&$(&#snap&).click(function () {& && && &&
& && && &context.drawImage(video, 0, 0, 320, 320);& &&&
& && && && &&&//CatchCode();& && && &&&
& & });& && && &&&
& && && & }, false);& && && &&&
& && && & //定时器& && && &
&&var interval = setInterval(CatchCode, &300&);& && &
& && && && && && && && & //这个是 刷新上 图像的& && &&&
& &function CatchCode() {& && &&&
& && & $(&#snap&).click();
//实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途& &&
& && && &&&var canvans = document.getElementByIdx(&canvas&);&
//获取浏览器页面的画布对象& && && && && && && &&&
& &//以下开始编 数据& &
& && && && && && && && && && && & var imgData = canvans.toDataURL();&
//将图像转换为base64数据
& && && && && &var base64Data = imgData.substr(22);&
//在前端截取22位之后的字符串作为图像数据& && &&
& && && && && && && && && & //开始异步上& && && && &&
& &$.post(&uploadImgCode.ashx&, { &img&: base64Data }, function (data, status) {& && &
& && && && & if (status == &success&) {& && && && && &&&
& && &if (data == &OK&) {& && && && && &&
& && && &&&alert(&二维 已经解析&);& && && && && && &&
& & }& && && && && && &&&
& &else {& && && && &&&
& && && && & // alert(data);& && && &&
& && && && & }& && && &&
& && && &}& &&&
& && && && &&&else {& &
& && && && && && &&&alert(&数据上 失败&);& && && && && &&&
&&}& && && && && &}, &text&);& && && &&&
& && && & }& && &
最后的就是接收经过base64编码之后的图像文件了。&
public void ProcessRequest (HttpContext context) {& &&
& && &//接收经过base64编 之后的字符串& &&
& && &context.Response.ContentType = &text/plain&;& && &&&
&&try& && & {& && && &&&
& &img =context.Request[&img&].ToString();
//获取base64字符串& && && &&
& & byte[] imgBytes = Convert.FromBase64String(img);
//将base64字符串转换为字节数组& && && && &
&&System.IO.Stream stream = new System.IO.MemoryStream(imgBytes);
//将字节数组转换为字节流& && &
& && &&&//将流转回Image，用于将PNG 式照片转为jpg，压缩体积以便保存。& && && &
& &&&System.Drawing.Image imgae = System.Drawing.Image.FromStream(stream);& &&
& && && & imgae.Save(context.Server.MapPath(&~/Test/&) + Guid.NewGuid().ToString()+&.jpg&, System.Drawing.Imaging.ImageFormat.Jpeg);//保存图片& && && && &&
context.Response.Write(&OK&);//输出调用结果& && && && && &&
& &}& && && & catch (Exception msg)& && && & {& && && && &&
img =& && && && &
&&context.Response.Write(msg);& && &
& && &&&& && && && && &
& & }& && && && &&&
至此B/S通过本地摄像头拍照上传就完成了。HTML5的强大之处，爱不释手了。。。不在像以前需要写一堆烦人的东东了，而且你也可以不用去学flash... 额外说一句，如果您还在用IE6\IE7那您还是别玩html5了...
初出茅庐，欢迎指教！！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：236052次
积分：5316
积分：5316
排名：第3616名
原创：270篇
转载：191篇
评论：51条
(6)(8)(17)(18)(3)(14)(13)(10)(5)(7)(24)(17)(2)(18)(28)(6)(3)(21)(17)(1)(1)(4)(17)(8)(7)(6)(16)(7)(3)(13)(8)(4)(4)(4)(9)(4)(6)(2)(1)(5)(3)(4)(2)(1)(2)(8)(6)(3)(1)(1)(1)(13)(5)(1)(6)(5)(2)(2)(2)(3)(1)(4)(5)(7)(6)(2)html5如何调用手机摄像头,实现拍照,-中国学网-中国IT综合门户网站-提供健康,养生,留学,移民,创业,汽车等信息
> 信息中心 >
html5如何调用手机摄像头,实现拍照,
来源：互联网 发表时间： 17:58:13 责任编辑：鲁晓倩字体：
为了帮助网友解决“html5如何调用手机摄像头,实现拍照,”相关的问题，中国学网通过互联网对“html5如何调用手机摄像头,实现拍照,”相关的解决方案进行了整理,用户详细问题包括:RT,我想知道:html5如何调用手机摄像头,实现拍照,拍视频实现上传功能，具体解决方案如下：解决方案1：
PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手机的核心功能――包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如iPhone的iPhone SDK，Android的Android SDK等，也可以和DW5.5配套开发。使用PhoneGap只比为每个平台分别建立供讥垛客艹九讹循番末应用程序好一点点，因为虽然基本代码是一样的，但是你仍然需要为每个平台分别编译应用程序。
解决方案2：
html5提供了 navigator.getUserMedia接口使用设备摄像头，chrome28上测试已经可用，手机端浏览器测试发现只有opera浏览器可用。浏览器未完善之前可以使用PhoneGap完成，它提供了 navigator.camera.getPicture接口，使用js可以方便调用设备摄像头。
2个回答2个回答1个回答2个回答2个回答1个回答3个回答2个回答1个回答
相关文章：
最新添加资讯
24小时热门资讯
Copyright © 2004- All Rights Reserved. 中国学网 版权所有
京ICP备号-1 京公网安备02号