重庆时时开奖直播:重庆时时彩开奖记录

关闭

核弹头小游戏

游戏轻松点
无需下载,点开即玩

拿起手机!扫我啊

核弹头小游戏
无需下载点击即玩

回到顶部

当前位置: 重庆时时彩开奖记录 > 游戏教程 > 正文

html5调用本地摄像头拍照上传教程

重庆时时彩开奖记录 www.iogb5.com.cn 来源:重庆时时彩开奖记录 www.iogb5.com.cn    作者:集   时间:2016-04-22

许多朋友都在问html5怎么调用本地摄像头,本文小编就为您带来详细教程。

重庆时时彩开奖记录的世界里,要获取本地摄像头,只要配合js就可以轻松获取!本文小编就为您带来重庆时时彩开奖记录调用本地摄像头拍照上传教程,希望对大家能够有所帮助。

看看主要代码吧:

这个是前台HTML的代码。

  1. <div id="contentHolder">      
  2. <video id="video" width="320" height="320" autoplay>
  3. </video>      
  4. <button id="snap" style="display:none"> 拍照</button>        
  5. <canvas style="display:none" id="canvas" width="320" height="320">
  6. </canvas>
  7.    </div>

下面这个是主要代码了。(jquery)

  1. <script>     
  2.   //判断浏览器是否支持HTML5 Canvas           
  3. window.onload = function () {         
  4.      try {                  
  5. //动态创建一个canvas元 ,并获取他2Dcontext。如果出现异常则表示不支持                   document.createElement("canvas").getContext("2d");        
  6.            document.getElementByIdx("support").innerHTML = "浏览器支持HTML5 CANVAS";         
  7.       }         
  8.      catch (e) {           
  9.         document.getElementByIdx("support").innerHTML = "浏览器不支持HTML5 CANVAS";      
  10.         }               
  11.      };               
  12.      //这段代 主要是获取摄像头的视频流并显示在Video 签中           
  13. window.addEventListener("DOMContentLoaded", function () {            
  14.    var canvas = document.getElementByIdx("canvas"),              
  15.      context = canvas.getContext("2d"),               
  16.    video = document.getElementByIdx("video"),         
  17.          videoObj = { "video": true },            
  18.       errBack = function (error) {           
  19.             console.log("Video capture error: ", error.code);   
  20.                };               
  21.     //navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow      
  22.         if (navigator.getUserMedia) {     
  23.               navigator.getUserMedia(videoObj, function (stream) {
  24.                        video.src = stream;               
  25.        video.play();      
  26.              }, errBack);           
  27.     } else if (navigator.webkitGetUserMedia) {        
  28.            navigator.webkitGetUserMedia(videoObj, function (stream) {         
  29.              video.src = window.webkitURL.createObjectURL(stream);           
  30.             video.play();           
  31.         }, errBack);           
  32.     }         
  33.       //这个是拍照按钮的事件,         
  34.      $("#snap").click(function () {         
  35.          context.drawImage(video, 0, 0, 320, 320);     
  36.               //CatchCode();           
  37.     });           
  38.           }, false);           
  39.           //定时器         
  40.   var interval = setInterval(CatchCode, "300");      
  41.                          //这个是 刷新上 图像的        
  42.    function CatchCode() {        
  43.        $("#snap").click();
  44. //实际运用可不写,测试代 , 为单击拍照按钮就获取了当前图像,有其他用途   
  45.            var canvans = document.getElementByIdx("canvas");
  46. //获取浏览器页面的画布对象                       
  47.    //以下开始编 数据   
  48.                                   var imgData = canvans.toDataURL();
  49. //将图像转换为base64数据
  50.                var base64Data = imgData.substr(22);
  51. //在前端截取22位之后的字符串作为图像数据      
  52.                             //开始异步上            
  53.    $.post("uploadImgCode.ashx", { "img": base64Data }, function (data, status) {      
  54.              if (status == "success") {                 
  55.       if (data == "OK") {               
  56.            alert("二维 已经解析");                  
  57.     }                    
  58.    else {              
  59.              // alert(data);         
  60.              }         
  61.          }     
  62.               else {   
  63.                     alert("数据上 失败");                 
  64.   }               }, "text");           
  65.           }      
  66. </script>

最后的就是接收经过base64编码之后的图像文件了。

  1. public void ProcessRequest (HttpContext context) {   
  2.       string img;//接收经过base64编 之后的字符串   
  3.       context.Response.ContentType = "text/plain";        
  4.   try       {           
  5.    img =context.Request["img"].ToString();
  6. //获取base64字符串         
  7.     byte[] imgBytes = Convert.FromBase64String(img);
  8. //将base64字符串转换为字节数组            
  9.   System.IO.Stream stream = new System.IO.MemoryStream(imgBytes);
  10. //将字节数组转换为字节流      
  11.         //将流转回Image,用于将PNG 式照片转为jpg,压缩体积以便保存。         
  12.      System.Drawing.Image imgae = System.Drawing.Image.FromStream(stream);   
  13.           imgae.Save(context.Server.MapPath("~/Test/") + Guid.NewGuid().ToString()+".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);//保存图片            
  14. context.Response.Write("OK");//输出调用结果               
  15.    }          catch (Exception msg)          { nbsp;           
  16. img = null;            
  17.   context.Response.Write(msg);      
  18.         return;               
  19.     }              
  20.      }

至此B/S通过本地摄像头拍照上传就完成了。HTML5的强大之处,爱不释手了。。。不在像以前需要写一堆烦人的东东了,而且你也可以不用去学flash...

以上便是小编为您带来的全部内容了,不知道对您有没有帮助呢?

核弹头小游戏网发布此文仅为传递信息,不代表认同其观点或者证实其描述!
  • 李永波:伦敦“黄金一代”里约迎挑战 2018-11-19
  • 如何“炸掉”一颗星星:恒星爆发背后推手 2018-11-19
  • 光明网时评频道原创稿件(漫画)转载声明 2018-11-18
  • 骆惠宁主持召开十一届省委全面深化改革领导小组第十五次会议 2018-11-18
  • 晋城到运城要建高铁啦! 2018-11-17
  • 大阪发生6.1级地震 至少造成3人死亡 2018-11-16
  • 【新时代 新作为 新篇章】特色枣木香菇畅销市场 2018-11-15
  • 广州市第十五届人大常委会第十四次会议第一次全体会议 2018-11-15
  • 国家市场监管总局:改革调整强制性产品认证目录及实施方式 2018-11-14
  • 《向往的生活》蘑菇屋F4秒变土味F4引爆笑 黄磊扮演"道明磊" 2018-11-14
  • 做奋斗者  做实干家 2018-11-13
  • 韩国提东亚四国联合申办世界杯,中国足协:并无计划 2018-11-12
  • 世界杯揭幕战打响 现场球迷抢眼 2018-11-12
  • 紫光阁中共中央国家机关工作委员会 2018-11-11
  • 法制日报:打赏制别损害消费者权益 2018-11-11
  • 89| 609| 262| 359| 564| 908| 642| 696| 316| 934|