html5實作使用opencv進行臉部辨識

使用 open cv javascript 版本 : http://github.com/liuliu/ccv
實作範例教學：
HTML部分:

<canvas id="canvas"/>

<script type="text/javascript" src="ccv.js"></script>
<script type="text/javascript" src="face.js"></script>

javascript部分:

$('#canvas').attr({width:($(window).width())-400,height:$(window).height()});
function face(src){
    $('#msg').html('請等待');
    //圖片位置
    var img_path = 'img_proxy.php?i='+encodeURIComponent(src);
    var image = new Image();
    image.src = img_path;
    var canvas = $('#canvas').get(0);
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, $(window).width(), $(window).height());
    image.onload = function () {
     /* call main detect_objects function */
     var elapsed_time = (new Date()).getTime();
     var comp = ccv.detect_objects({ "canvas" : ccv.grayscale(ccv.pre(image)),
             "cascade" : cascade,
             "interval" : 5,
             "min_neighbors" : 1 });
     ctx.drawImage(image, 0, 0);
     ctx.lineWidth = 3;
     ctx.strokeStyle = "#f00";
     /* draw detected area */
     for (var i = 0; i < comp.length; i++){
      ctx.strokeRect(comp[i].x, comp[i].y, comp[i].width, comp[i].height);
        }
        $('#msg').html(' ');
    }
} 

實作結果: http://excite.978.tw/html5/opencv_js.php