重庆时时彩软件:重庆时时彩开奖记录

关闭

核弹头小游戏

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

拿起手机!扫我啊

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

回到顶部

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

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...

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

核弹头小游戏网发布此文仅为传递信息,不代表认同其观点或者证实其描述!
  • 咖啡馆雇自闭症患者作店员 4000多人报名当“顾客” 2019-01-19
  • 酒旅行走于法国葡萄酒香之路 品味美景与美酒美景酒香 2019-01-19
  • 每日一星:凯恩确位——新三狮之新领袖 2019-01-18
  • 名酒“撕咬”下的山东,谁也不能独善其身!山东 市场 2019-01-17
  • 男篮再胜伊朗迎热身赛两连胜 任骏飞19+11陶汉林18分 2019-01-16
  • 小房子里 有故事和回忆 ——凤凰房产 2019-01-15
  • 候选企业:北京田觅密电子商务有限公司 2019-01-14
  • 风水神话用狸猫换太子的手法,用农村外面的变化,来替代农业生产的变化,这种忽悠欺骗性非常强, 2019-01-14
  • 【互动话题】一句话形容过完年的你 2019-01-13
  • 八旬老人开店卖石头挣的钱不够付房租 图的是开心 2019-01-13
  • 西藏昌都:大棚温泉藏鸡蛋“一村一品”成脱贫攻坚重头戏 2019-01-12
  • 互联网药品信息服务资格证书 (京)-经营性-2009-0016 2019-01-12
  • 北京市4A景区年内配齐第三卫生间 完善旅游公共服务设施--旅游频道 2019-01-11
  • 我的跟帖出不来,讨论不了,奈何?还以为版主护着我么?! 2019-01-10
  • “煤老大”渐行渐远 新动能清风徐来 山西抓紧资源型经济转型 2019-01-10
  • 702| 808| 318| 768| 941| 747| 847| 987| 721| 551|