實作範例教學:
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
沒有留言:
張貼留言