2015-05-11  844 views 评论

HTML5实现调用手机摄像头拍照上传

实现拍照功能的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>
图片的获取

下面我们要从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.aspx',{ 'data' : data } );
在后台我们用PHP脚本接收数据并存储为图片。

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: