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

　　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應用上來。

相關規範：