首页 > 代码库 > HTML5实现在线抓拍
HTML5实现在线抓拍
<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ><script type="text/javascript" src="/js/jquery1.8.3.js"></script><title>在线拍照</title></head><body><video id="camVideo" width="400" height="328" autoplay></video> <br /><button id="snap">抓图</button> <br /><table><tr> <td><canvas id="canvas" width="400" height="328" /></td><td><input name="imgData" id="imgData" style="width:600px"/></td></tr></table><script> $(function(){ // 获取元素，创建配置 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var video = document.getElementById("camVideo"); var videoObj = { "video": true }; var errBack = function(error) { console.log("Video capture error: ", error.code); }; // 添加视频监听器 if(navigator.getUserMedia) { // 标准的API navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit 核心的API navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if(navigator.mozGetUserMedia) { // WebKit-prefixed navigator.mozGetUserMedia(videoObj, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } document.getElementById("snap").addEventListener("click", function() { context.drawImage(video, 0, 0, 400, 328); var dataUrl = context.canvas.toDataURL("image/png"); $( "#imgData" ).val( dataUrl ); });});</script></body></html>
HTML5实现在线抓拍
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。