You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!--显示头像--> <div class="show-picture" id="picture_div" > <video id="video" class="picture-video" width="360" height="360" autoplay></video> <canvas id="canvas" class="picture-canvas" width="360" height="360"></canvas> <img id="headSculpture"> <button type="button" class="layui-btn layui-btn-normal snap" id="snap">拍照</button> </div> <script language="JavaScript"> //开启摄像头 var MediaStreamTrack; var isPhotograph=true; function getMedia() { let constraints = { video: {width: 360, height: 360}, audio: false, }; //获得video摄像头区域 let video = document.getElementById("video"); //这里介绍新的方法，返回一个 Promise对象 // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数 // then()是Promise对象里的方法 // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序 // 避免数据没有获取到 let promise = navigator.mediaDevices.getUserMedia(constraints); promise.then(function (MediaStream) { MediaStreamTrack=typeof MediaStream.stop==='function'?MediaStream:MediaStream.getTracks()[1]; video.srcObject = MediaStream; video.play(); isPhotograph = false }); } //拍照 function takePhoto() { if(isPhotograph){ getMedia(); clearCanvas(); isPhotograph=false; }else{ //获得Canvas对象 let video = document.getElementById("video"); let canvas = document.getElementById("canvas"); let ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0,360, 360); MediaStreamTrack && MediaStreamTrack.stop(); imgData = document.getElementById("canvas").toDataURL("image/jpeg"); isPhotograph=true; } }
document.getElementById("snap").addEventListener("click", takePhoto); /** * @description 重置canvas（清除照片） * @version 1.0 * @returns */ function clearCanvas() { var c = document.getElementById("canvas"); var cxt = c.getContext("2d"); c.height = c.height; }
</script></body></html>
|
