今天做手機(jī)網(wǎng)站，想實(shí)現(xiàn)手機(jī)掃描二維碼功能。首先實(shí)現(xiàn)在瀏覽器中調(diào)用手機(jī)攝像頭，實(shí)現(xiàn)拍照功能并且把拍下的照片顯示在頁面并上傳到服務(wù)器上，然后再在服務(wù)器端進(jìn)行分析。

首先實(shí)現(xiàn)在瀏覽器中調(diào)用攝像頭，當(dāng)然用現(xiàn)在火的不行的html5，html5中的<video>標(biāo)簽，并將從攝像頭獲得視頻作為這個(gè)標(biāo)簽的輸入來源。實(shí)現(xiàn)拍照功能的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>

經(jīng)本人測(cè)試在android手機(jī)的opera瀏覽器瀏覽器下可以正常實(shí)現(xiàn)手機(jī)拍照功能。android手機(jī)下的google chrome瀏覽器還不行，自帶的瀏覽器也測(cè)試沒有通過。iphone手機(jī)的safari瀏覽器也是不支持的。

想了解更多關(guān)于html5調(diào)用手機(jī)攝像頭的內(nèi)容可以點(diǎn)擊http://dev.w3.org/2011/webrtc/editor/getusermedia.html。

圖片的獲取：

下面我們要從Canvas獲取圖片數(shù)據(jù)，其核心思路是用canvas的toDataURL將Canvas的數(shù)據(jù)轉(zhuǎn)換為base64位編碼的PNG圖像，類似于“data:image/png;base64,xxxxx”的格式。
Html代碼

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

因?yàn)檎嬲龍D像數(shù)據(jù)是base64編碼逗號(hào)之后的部分，所以我們實(shí)際服務(wù)器處理的圖像數(shù)據(jù)應(yīng)該是這部分，我們可以用兩種辦法來獲取。

第一種：是在前端截取22位以后的字符串作為圖像數(shù)據(jù)，例如：
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

第二種：是在后端獲取傳輸?shù)臄?shù)據(jù)后用后臺(tái)語言截取22位以后的字符串。例如PHP里
php代碼:

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

圖片上傳：

在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺(tái)腳本。例如使用jQuery時(shí)：
js代碼

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

在后臺(tái)我們用PHP腳本接收數(shù)據(jù)并存儲(chǔ)為圖片。
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);

}

請(qǐng)注意，以上的解決方案不僅能用于Web App拍照上傳，并且你可以實(shí)現(xiàn)把Canvas的輸出轉(zhuǎn)換為圖片上傳的功能。這樣你可以使用Canvas為用戶提供圖片編輯，例如裁剪、上色、涂鴉的畫板功能，然后把用戶編輯完的圖片保存到服務(wù)器上。