Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

Face Detection in JavaScript via HTML5 Canvas

November 2nd 2010

You have probably seen face detection at work in programs like iPhoto and Picasa, but what if you could do that performantly in JavaScript?  Chinese developer Liu Liu has done the honors, and implemented the algorithm using the canvas element.

The algorithm is implemented on top of a JS port of a C-based computer vision library by the same author.  It works off a grayscale version of the image, and seems to be quite reliable in detecting faces in photographs.  The demo then draws a red box around each face in the picture, but the library could be used to do much more interesting things with this data.

image
                   
image

You can imagine the likes of Facebook using something like this to help you tag photos sometime in the future, and if the algorithm could figure out who each face in a picture belonged to, the possibilities would be endless - and maybe a bit scary!  With faster JavaScript already here, and awesome APIs like canvas, we will soon see even more cool things like this in the wild!  It is an exciting time to be a JavaScript developer.

You can check out a demo of the face detection algorithm, for which the only server-side code is a PHP proxy.  The code is also available on Github.  Impressive work!