examples/eye.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Eye detection demo with Haar cascades detector in javascript and HTML5 canvas</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style type="text/css">
            body
            {
             background-color:#121212;
             color:#aaa;
             font-size:12px;
            }
        </style>
        <!-- support parallel computations using web-workers (parallel.js) -->
        <script type="text/javascript" src="../build/parallel/parallel.min.js"></script>
        <script type="text/javascript" src="../build/haar-detector.min.js"></script>
        <script type="text/javascript" src="../cascades/haarcascade_eye.js"></script>
    </head>
    <body>
        <style>#forkongithub a{background:#aa0000;color:#fff;text-decoration:none;font-family:arial, sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:0.9rem;line-height:1.4rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#aa0000;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;z-index:100;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:absolute;display:block;z-index:100;top:0;right:0;width:200px;overflow:hidden;height:200px;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}</style><span id="forkongithub"><a href="https://github.com/foo123/HAAR.js">Fork me on GitHub</a></span>
        
        <h1>Eye Detection with eye haar cascade by Mar Canet in JavaScript</h1>
        <div id="wait" style="display:none"><img src='ajax-loader.gif' /></div>
        <div id="container" style="position:relative;"><canvas id='image'></canvas></div>
        <div id="info" style="position:relative;font-size:18px;">
            <br />
            If <code>&quot;?parallel&quot;</code> is set in the URL, <strong>Parallel</strong> detection is used
            <br />
            else, <strong>Asynchronous (not Parallel)</strong> detection is used
            <br /> <br />
        </div>
        
        <script>
        //<![CDATA[
        var wait=document.getElementById('wait'), info=document.getElementById('info'),
            canvas=document.getElementById('image'), ctx=canvas.getContext('2d'), image=new Image(),
            log = (window.console && window.console.log) ? function(s) { window.console.log(s); } : function() {},
            useParallel
            ;
            
        useParallel = (/[?&]parallel/.test(location.href)) ? Parallel : false;
        
        if (useParallel)
        {
            info.innerHTML += "CURRENT MODE: Parallel Detection";
        }
        else
        {
            info.innerHTML += "CURRENT MODE: Asynchronous (not Parallel) Detection";
        }
        
        image.onload=function(){
            // profile
            //console.timeEnd('ImageLoad');
            wait.style.display = 'block';
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.getContext('2d').drawImage(image, 0, 0);
            
            // profile
            //console.time('FeatureDetect');
            // detect the feature
            new HAAR.Detector(haarcascade_eye, useParallel) // much faster when using parallel computation
                    .image(image, /*0.8*/150 / image.width) // use the image with standardised dimensions
                    .interval(50) // set detection interval for asynchronous detection (if not parallel)
                    .complete(function(){  // onComplete callback
                        // profile
                        //console.timeEnd('FeatureDetect');
                        
                        var i, rect, l=this.objects.length;
                        wait.style.display='none';
                        ctx.strokeStyle="rgba(220,0,0,1)"; ctx.lineWidth=2;
                        ctx.strokeRect(this.Selection.x, this.Selection.y, this.Selection.width, this.Selection.height);
                        ctx.strokeStyle="rgba(75,221,17,1)"; ctx.lineWidth=2;
                        for (i=0; i<l; i++)
                        {
                            rect=this.objects[i];
                            ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
                        }
                        // provide info
                        log('Selection Rectangle: ');
                        log(this.Selection.toString());
                        log('Detected Features (' + l +') :');
                        log(JSON.stringify(this.objects));
                        alert(l+" Objects found");
                    })
                    .cannyThreshold({low:5, high:200})  // custom thresholds for canny pruning (for best results)
                    .detect(1, 1.1, 0.12, 1, 0.2, true); // go
        };
        // profile
        //console.time('ImageLoad');        
        image.src='model1.jpg'; // load it
        //]]>
        </script>
    </body>
</html>