如何使用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 並進行了排版和內容上的一些適當修改。