如何使用HTML5實現利用網路攝影機拍照上傳功能

（為便於閱讀，對原文進行了不失原意的適當修改，包括代碼中一些錯誤的重複，並作了注釋）

　　HTML5支援人員WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。

　　1、 視頻流

　　HTML5 的 The Media Capture（媒體捕捉） API 提供了對網路攝影機的可程式化訪問，使用者可以直接用 getUserMedia
（請注意目前僅Chrome和Opera支援）獲得網路攝影機提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標籤，並將從網路攝影機獲得的視頻作為這個標籤的輸入來源。

• <video id=”video” autoplay=”"></video>
• <script>
• var video_element=document.getElementById(‘video’);
• if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
•       navigator.getUserMedia(‘video’,success,error);  //success是回呼函數,當然你也可以直接在此寫一個匿名函數
• }
• function success(stream){
•      video_element.src=stream;
• }
• </script>
  此時，video 標籤內將顯示動態攝像視頻流。下面需要進行拍照了。

　　2、 拍照

　　拍照是採用HTML5的Canvas功能，即時捕獲Video標籤的內容，因為Video元素可以作為Canvas映像的輸入，所以這一點很好實現。主要代碼如下：

• var canvas=document.createElement(‘canvas’); //動態建立畫布對象
• var ctx=canvas.getContext(’2d’);
• var cw=vw,ch=vh;
• ctx.fillStyle=”#ffffff”;
• ctx.fillRect(0,0,cw,ch);
• ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的地區捕捉繪製到畫布上指定的地區，可進行不等大不等位的繪製。
• document.body.append(canvas);

　　3、 圖片擷取

　　從Canvas擷取圖片資料的核心思路是用canvas的toDataURL將Canvas的資料轉換為base64位編碼的PNG映像，類似於“data:image/png;base64,xxxxx”的格式。

• var imgData=canvas.toDataURL(“image/png”);

  這樣，imgData變數就儲存了一長串的字元資料內容，表示的就是一個PNG映像的base64編碼。因為真正的映像資料是base64編碼逗號之後的部分，所以要讓實際伺服器接收的映像資料應該是這部分，我們可以用兩種辦法來擷取。

　　第一種：是在前端截取22位以後的字串作為映像資料，例如：

• var data=imgData.substr(22);

　　如果要在上傳前擷取圖片的大小，可以使用：

• var length=atob(data).length; //atob 可解碼用base-64解碼的字串

　　第二種：是在後端擷取傳輸的資料後用後台語言截取22位以後的字串（也就是在前台略過上面這步直接上傳）。例如PHP裡：

• $image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

　　4、 圖片上傳

　　在前端可以使用Ajax將上面獲得的圖片資料上傳到後台指令碼。例如使用jQuery時可以用：

• $.post(‘upload.php’,{‘data’:data});

在後台我們用PHP指令碼接收資料並儲存為圖片。

• function convert_data($data){
•      $image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
•      save_to_file($image);
• }
• function save_to_file($image){
•     $fp=fopen($filename,’w');
•     fwrite($fp,$image);
•     fclose($fp);
• }

　　以上的解決方案不僅能用於Web App拍照上傳，也可以通過Canvas的編輯功能函數提供圖片編輯，例如裁剪、上色、塗鴉、圈點等功能，然後把使用者編輯完的圖片上傳儲存到伺服器上。

　　在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發項目必將會遷移到WEB應用上來。

相關規範：

The MediaCapture API：http://www.w3.org/TR/media-capture-api/

Canvas：http://dev.w3.org/html5/2dcontext/

 

本文轉自:http://h5dev.uc.cn/thread-14-1-1.html 並進行了排版和內容上的一些適當修改。