核弹头H5小游戏

关闭

核弹头小游戏

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

拿起手机!扫我啊

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

回到顶部

当前位置: 核弹头首页 > 游戏教程 > 正文

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

来源:www.h5uc.com    作者:集   时间:2016-04-22

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

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

看看主要代码吧:

这个是前台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...

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

核弹头小游戏网发布此文仅为传递信息,不代表认同其观点或者证实其描述!

游戏老司机 更多

小编推荐 更多

最新资讯 更多