如何借助HTML5实现拍照上传应用
发布时间：2021-11-23 18:04:47 所属栏目：教程 来源：互联网
导读：在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器。 1、 视频流 HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流
|
在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器。 1、 视频流 HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源（请注意目前仅Chrome和Opera支持getUserMedia）。 <video id="video" autoplay=""></video> <script> var video_element = document.getElementById('video'); if (navigator.getUserMedia) { // opera should use opera.getUserMedia now navigator.getUserMedia('video',success, error); } function success(stream) { video_element.src =stream; } </script> 2、拍照 拍照功能，我们采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入，这一点很棒。主要代码如下： <script> var canvas =document.createElement('canvas'); var ctx = canvas.getContext('2d'); var cw = vw; var ch = vh; ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, cw, ch); ctx.drawImage(video_element, 0, 0, vvw,vvh, 0,0, vw,vh); document.body.append(canvas); </script>  （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
