H5实现拍照并上传-阿里云开发者社区

H5实现拍照并上传

2017-11-08 2194

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection" />
<title>测试</title>
</head>
<body>
<video id="video" width="320" height="240" autoplay></video>
<button id="snap">拍摄</button>
<canvas id="canvas" width="320" height="240"></canvas>
<script>
window.addEventListener("DOMContentLoaded", function() {
      var canvas = document.getElementById("canvas"),//调用canvas接口
            context = canvas.getContext("2d"),
            video = document.getElementById("video"),
            videoObj = { "video": true },
            errBack = function(error) {//错误处理
                  console.log("Video capture error: ", error.code);
            };
      if(navigator.getUserMedia) {//调用html5拍摄接口
         navigator.getUserMedia(videoObj, function(stream) {
            video.src = stream;//摄像机属于视频流，所以当然要输出到html5的video标签中了
            video.play();//开始播放
         }, errBack);
      } else if(navigator.webkitGetUserMedia) { //WebKit内核调用html5拍摄接口
         navigator.webkitGetUserMedia(videoObj, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);//同上
            video.play();//同上
         }, errBack);
      }
      else if(navigator.mozGetUserMedia) { //moz内核调用html5拍摄接口
         navigator.mozGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);//同上
            video.play();//同上
         }, errBack);
      }
}, false);

document.getElementById("snap")
         .addEventListener("click", function() {//获取拍照按钮绑定事件
            var canvans = document.getElementById("canvas"),//调用canvas接口
                     context = canvas.getContext("2d");
            context.drawImage(video, 0, 0, 640, 480);//调用canvas接口的drawImage方法绘制当前video标签中的静态图片，其实就是截图

            var imgData = canvans.toDataURL();//获取图片的base64格式的数据
            //这里就可以写上传服务器代码了
         });
</script>
</body>
</html>

本文转自左正博客园博客，原文链接：http://www.cnblogs.com/soundcode/p/5101941.html ，如需转载请自行联系原作者

H5实现拍照并上传

热门文章

最新文章

相关电子书

相关实验场景