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