tracking.js示例 - 浏览器中检测摄像头中的人脸自动拍照并提示保存到本地-蒲公英云

tracking.js示例 - 浏览器中检测摄像头中的人脸自动拍照并提示保存到本地

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>
        <script src="./build/tracking-min.js"></script>
        <script src="./build/data/face-min.js"></script>
        <style>
            video,
            canvas {
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="demo-container">
            <video id="video" width="320" height="240" preload autoplay loop muted></video>
            <canvas id="canvas" width="320" height="240"></canvas>
        </div>
        <script>
            window.onload = function () {
                // 视频显示
                var video = document.getElementById('video');
                //   绘图
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                var time = 10000;
                var tracker = new tracking.ObjectTracker('face');
                //   设置识别的放大比例
                tracker.setInitialScale(4);
                //   设置步长
                tracker.setStepSize(2);
                //   边缘密度
                tracker.setEdgesDensity(0.1);
                //   启动摄像头，并且识别视频内容
                var trackerTask = tracking.track('#video', tracker, {
                    camera: true
                });
                var flag = true;
                tracker.on('track', function (event) {
                    if (event.data.length === 0) {
                        context.clearRect(0, 0, canvas.width, canvas.height);
                    } else {
                        context.clearRect(0, 0, canvas.width, canvas.height);
                        event.data.forEach(function (rect) {
                            context.strokeStyle = '#ff0000';
                            context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                            context.fillStyle = "#ff0000";
                            //console.log(rect.x, rect.width, rect.y, rect.height);
                        });
                        if (flag) {
                            console.log("拍照");
                            context.drawImage(video, 0, 0, 320, 240);
                            saveAsLocalImage();
                            context.clearRect(0, 0, canvas.width, canvas.height);
                            flag = false;
                            setTimeout(function () {
                                flag = true;
                            }, time);
                        } else {
                            //console.log("冷却中");
                        }
                    }
                });
            };
            function saveAsLocalImage() {
                var myCanvas = document.getElementById("canvas");
                // here is the most important part because if you dont replace you will get a DOM 18 exception.  
                // var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");  
                var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                // window.location.href = image; // it will save locally  
                // create temporary link  
                var tmpLink = document.createElement('a');
                tmpLink.download = 'image.png'; // set the name of the download file 
                tmpLink.href = image;
                // temporarily add link to body and initiate the download  
                document.body.appendChild(tmpLink);
                tmpLink.click();
                document.body.removeChild(tmpLink);
            }
        </script>
    </body>
</html>