在HTML5規範的支援下，WebApp在手機上拍照已經成為可能。在下面，我將講解Web App如何用手機進行拍照，顯示在頁面上並上傳到伺服器。

1、  視訊流

        HTML5 The Media Capture API提供了對攝像頭的可程式設計訪問，使用者可以直接用getUserMedia獲得攝像頭提供的視訊流。我們需要做的是新增一個HTML5的Video標籤，並將從攝像頭獲得視訊作為這個標籤的輸入來源（請注意目前僅Chrome和Opera支援getUserMedia。補充：請使用Opera支援HTML5的新版本，如果是Chrome，版本需為Chrome 18.0.1008+，並使用about:flags來開啟WebRTC，請看下圖

<video id="video" autoplay=""></video>
<script>
var video_element = document.getElementById('video');
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
         navigator.getUserMedia('video',success, error);
}
function success(stream) {
         video_element.src =stream;
}
</script>
 

        拍照功能，我們採用HTML5的Canvas實時捕獲Video標籤的內容，Video元素能作為Canvas影象的輸入，這一點很棒。主要程式碼如下：

<script>
         var canvas =document.createElement('canvas');
 
         var ctx = canvas.getContext('2d');
         var cw = vw;
         var ch = vh;
         ctx.fillStyle = "#ffffff";
         ctx.fillRect(0, 0, cw, ch);
         ctx.drawImage(video_element, 0, 0, vvw,vvh, 0,0, vw,vh);
         document.body.append(canvas);
</script>
 

        下面我們要從Canvas獲取圖片資料，其核心思路是用canvas的toDataURL將Canvas的資料轉換為base64位編碼的PNG影象，類似於“data:image/png;base64,xxxxx”的格式。

var imgData =canvas.toDataURL("image/png");

        因為真正影象資料是base64編碼逗號之後的部分，所以我們實際伺服器處理的影象資料應該是這部分，我們可以用兩種辦法來獲取。

        第一種：是在前端擷取22位以後的字串作為影象資料，例如：

var data = imgData.substr(22);

        如果要在上傳前獲取圖片的大小，可以使用：

var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding

        第二種：是在後端獲取傳輸的資料後用後臺語言擷取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的輸出轉換為圖片上傳的功能。這樣你可以使用Canvas為使用者提供圖片編輯，例如裁剪、上色、塗鴉的畫板功能，然後把使用者編輯完的圖片儲存到伺服器上。

Canvas塗鴉功能

        在HTML5的驅動下，Web App與Native App之間是否還有不可逾越的鴻溝？我將會在3月23日百度開發者大會上現場來解答這個問題，敬請期待。

        相關規範：

        相關The Media Capture示例：

        原創文章，轉載請標明出處：蔣宇捷的專欄