H5页面调用拍照上传图片

来源:互联网 发布:帝国cms图集 编辑:程序博客网 时间:2024/04/30 12:23
<script type="text/javascript">
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('btn_submit_fx').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格式的数据
           $.post("../yzf/form_action.jsp", 
    { "img": base64Data }, function (data, status) {      
                if (status == "success") {                 
          if (data == "OK") {                
              alert("二维 已经解析");                   
        } else {              
                // alert(data);          
                }          
            }else {   
                       alert("数据上 失败");                 
      }               
               }, "text"); 
});
</script>
0 0
原创粉丝点击