html5調用手機攝像頭，實作拍照上傳功能

今天做手機網站，想實作手機掃描二維碼功能。首先實作在浏覽器中調用手機攝像頭，實作拍照功能并且把拍下的照片顯示在頁面并上傳到伺服器上，然後再在伺服器端進行分析。

首先實作在浏覽器中調用攝像頭，當然用現在火的不行的html5

首先實作在浏覽器中調用攝像頭，當然用現在火的不行的html5，html5中的<video>标簽，并将從攝像頭獲得視訊作為這個标簽的輸入來源。實作拍照功能的html5代碼：

<article>
 <style scoped>
  video { transform: scaleX(-1); }
  p { text-align: center; }
 </style>
 <h1>Snapshot Kiosk</h1>
 <section id="splash">
  <p id="errorMessage">Loading...</p>
 </section>
 <section id="app" hidden>
  <p><video id="monitor" autoplay></video> <canvas id="photo"></canvas>
  <p><input type=button value="&#x1F4F7;" onclick="snapshot()">
 </section>
 <script>
  navigator.getUserMedia({video:true}, gotStream, noStream);
  var video = document.getElementById(\'monitor\');
  var canvas = document.getElementById(\'photo\');
  function gotStream(stream) {
    video.src = URL.createObjectURL(stream);
    video.onerror = function () {
      stream.stop();
    };
    stream.onended = noStream;
    video.onloadedmetadata = function () {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      document.getElementById(\'splash\').hidden = true;
      document.getElementById(\'app\').hidden = false;
    };
  }
  function noStream() {
    document.getElementById(\'errorMessage\').textContent = \'No camera available.\';
  }
  function snapshot() {
    canvas.getContext(\'2d\').drawImage(video, 0, 0);
  }
 </script>
</article>

經本人測試在android手機的opera浏覽器浏覽器下可以正常實作手機拍照功能。android手機下的google chrome浏覽器還不行，自帶的浏覽器也測試沒有通過。iphone手機的safari浏覽器也是不支援的。

想了解更多關于html5調用手機攝像頭的内容可以點選http://dev.w3.org/2011/webrtc/editor/getusermedia.html。

圖檔的擷取：

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

Html代碼

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

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

第一種：是在前端截取22位以後的字元串作為圖像資料，例如：

Html代碼

var data = imgData.substr(22);

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

Html代碼

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

第二種：是在後端擷取傳輸的資料後用背景語言截取22位以後的字元串。例如PHP裡

php代碼:

$image = base64_decode( str_replace(\'data:image/jpeg;base64,\', \'\',$data);

圖檔上傳：

在前端可以使用Ajax将上面獲得的圖檔資料上傳到背景腳本。例如使用jQuery時：

js代碼

$.post(\'upload.php\',{ \'data\' : data } );

在背景我們用PHP腳本接收資料并存儲為圖檔。

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為使用者提供圖檔編輯，例如裁剪、上色、塗鴉的畫闆功能，然後把使用者編輯完的圖檔儲存到伺服器上。