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

相關規範：

本文轉自ljianbing51CTO部落格，原文連結：http://blog.51cto.com/ljianbing/1607034 ，如需轉載請自行聯系原作者