如何使用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');
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>