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

1、拍照拍照是采用HTML5的Canvas功能，實時捕獲Video標簽的內容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現。主要代碼如下：varcanvas=document.createElement(‘canvas’);//動態創建畫布對象varctx=canvas.getContext(’2d’);varcw=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);

2、圖片獲取從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似于“data:image/png;base64,xxxxx”的格式。varimgData=canvas.toDataURL(“image/png”);這樣，imgData變量就存儲了一長串的字符數據內容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之后的部分，所以要讓實際服務器接收的圖像數據應該是這部分，方法是在前端截取22位以后的字符串作為圖像數據，例如：vardata=imgData.substr(22);如果要在上傳前獲取圖片的大小，可以使用：varlength=atob(data).length;//atob可解碼用base-64解碼的字串

3、圖片上傳在前端可以使用Ajax將上面獲得的圖片數據上傳到后臺腳本。例如使用jQuery時可以用：$.post(‘upload.php’,{‘data’:data});在后臺用PHP腳本接收數據并存儲為圖片。functionconvert_data($data){$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);save_to_file($image);}functionsave_to_file($image){$fp=fopen($filename,’w');fwrite($fp,$image);fclose($fp);