澳洲幸运5直播天天计划

核彈頭H5小游戲

關閉

核彈頭小游戲

游戲輕松點
無需下載,點開即玩

拿起手機!掃我啊

核彈頭小游戲
無需下載點擊即玩

回到頂部

當前位置: 核彈頭首頁 > 游戲教程 > 正文

html5調用本地攝像頭拍照上傳教程

來源:www.kseom.com.cn    作者:集   時間: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...

以上便是小編為您帶來的全部內容了,不知道對您有沒有幫助呢?

核彈頭小游戲網發布此文僅為傳遞信息,不代表認同其觀點或者證實其描述!
澳洲幸运5直播天天计划