欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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

首先實現在瀏覽器中調用攝像頭，當然用現在火的不行的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為用戶提供圖片編輯，例如裁剪、上色、涂鴉的畫板功能，然后把用戶編輯完的圖片保存到服務器上。