html中调用照相机怎么写,如何用html5调取照相机功能

html5概念啥的就不废话了，不知道的百度，谷歌一堆。。今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头，在html5之前，要在浏览器获取本地摄像头只有通过插件(ActiveX，但是这种只有IE支持)或者是flash来获取(或许你没学过flash那就很坑爹了)，在之后微软的silvertlight中也可以获取，但这些都比较麻烦，在html5的世界里，要获取本地摄像头，只要配合js就可以轻松获取。。目前支持html5的浏览器(参考http://www.cnblogs.com/jerry_cong/archive/2011/05/15/2047143.html)看看主要代码吧：这个是前台HTML的代码。<divid="contentHolder"><videoid="video"width="320"height="320"autoplay></video><buttonid="snap"style="display:none">拍照</button><canvasstyle="display:none"id="canvas"width="320"height="320"></canvas></div>复制代码下面这个是主要代码了。(jquery)<script>//判断浏览器是否支持HTML5Canvaswindow.οnlοad=function(){try{//动态创建一个canvas元，并获取他2Dcontext。如果出现异常则表示不支持document.createElement("canvas").getContext("2d");document.getElementByIdx("support").innerHTML="浏览器支持HTML5CANVAS";}catch(e){document.getElementByIdx("support").innerHTML="浏览器不支持HTML5CANVAS";}};//这段代主要是获取摄像头的视频流并显示在Video签中window.addEventListener("DOMContentLoaded",function(){varcanvas=document.getElementByIdx("canvas"),context=canvas.getContext("2d"),video=document.getElementByIdx("video"),videoObj={"video":true},errBack=function(error){console.log("Videocaptureerror:",error.code);};//navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianowif(navigator.getUserMedia){navigator.getUserMedia(videoObj,function(stream){video.src=stream;video.play();},errBack);}elseif(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);//定时器varinterval=setInterval(CatchCode,"300");//这个是刷新上图像的functionCatchCode(){$("#snap").click();//实际运用可不写，测试代，为单击拍照按钮就获取了当前图像，有其他用途varcanvans=document.getElementByIdx("canvas");//获取浏览器页面的画布对象//以下开始编数据varimgData=canvans.toDataURL();//将图像转换为base64数据varbase64Data=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");}</script>复制代码最后的就是接收经过base64编码之后的图像文件了。publicvoidProcessRequest(HttpContextcontext){stringimg;//接收经过base64编之后的字符串context.Response.ContentType="text/plain";try{img=context.Request["img"].ToString();//获取base64字符串byte[]imgBytes=Convert.FromBase64String(img);//将base64字符串转换为字节数组System.IO.Streamstream=newSystem.IO.MemoryStream(imgBytes);//将字节数组转换为字节流//将流转回Image，用于将PNG�

�照片转为jpg，压缩体积以便保存。System.Drawing.Imageimgae=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(Exceptionmsg){img=null;context.Response.Write(msg);return;}}复制代码至此B/S通过本地摄像头拍照上传就完成了。HTML5的强大之处，爱不释手了。。。不在像以前需要写一堆烦人的东东了，而且你也可以不用去学flash...额外说一句，如果您还在用IE6\IE7那您还是别玩html5了...初出茅庐，欢迎指教！！

阅读全文 >