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了...初出茅廬，歡迎指教！！
閱讀全文 >