如何使用HTML5实现拍照上传应用

如何使用HTML5实现拍照上传应用

在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器。

1、  视频流

HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源（请注意目前仅Chrome和Opera支持getUserMedia）。

1. <video id="video" autoplay=""></video>  
2. <script>  
3. var video_element = document.getElementById('video');  
4. if (navigator.getUserMedia) { // opera should use opera.getUserMedia now  
5.          navigator.getUserMedia('video',success, error);  
6. }  
7. function success(stream) {  
8.          video_element.src =stream;  
9. }  
10. </script>  

2、拍照

拍照功能，我们采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入，这一点很棒。主要代码如下：

1. <script>  
2.          var canvas =document.createElement('canvas');  
3.    
4.          var ctx = canvas.getContext('2d');  
5.          var cw = vw;  
6.          var ch = vh;  
7.          ctx.fillStyle = "#ffffff";  
8.          ctx.fillRect(0, 0, cw, ch);  
9.          ctx.drawImage(video_element, 0, 0, vvw,vvh, 0,0, vw,vh);  
10.          document.body.append(canvas);  
11. </script>