Detection of faces on canvas with Javascript « WiseCodes : Bringing You The Power of Code !!

Detection of faces on canvas with Javascript

Posted By Venu Thomas

Detect faces and is not just for Google Images. Now you can implement it on your website using Javascript and the canvas properties.

How it works?

To do this we need to work only 2 files in our <head />

^?View Code HTML

<script type="text/javascript" src="dat.js"></script>
<script type="text/javascript" src="detector.js"></script>

Dat.js the file shows how to detect and detector.js the file has the logic of the script can detect faces in any photo.
1 can detect faces in the photos, the process becomes slower depending on what we choose (of course).

1 Face

^?View Code JAVASCRIPT

face_detect_one( document.getElementById("myCanvas") );

Multiple Faces

^?View Code JAVASCRIPT

face_detect_multi( document.getElementById("myCanvas") , progress_callback, result_callback );
function progress_callback( StepsCompleted, TotalSteps){
....
}

Answer

The response functions that returns the values we obtain a rectangle that contains the person’s face.

^?View Code JAVASCRIPT

var myCanvas = document.getElementById("mycanvas");
 
var result = face_detect_one( myCanvas );
if (result) draw_rect(result, myCanvas);
 
function draw_rect(r, myCanvas){
	var CanvasContext = myCanvas.getContext("2d");
 	CanvasContext.strokeRect( r.x, r.y, r.w, r.w );
}

Link: via Percobaan

Share on Facebook

Tags: HTML, JAVASCRIPT, OpenSource

This entry was posted on Wednesday, June 17th, 2009 and is filed under JAVASCRIPT.

Share with others:

Thanks for visiting us! If you enjoyed these icons please feel free to share them! Or if you want to know what's going on with WiseCodes.com, follow us!