I've always been intrigued by recognition software because I cannot imagine the logic that goes into all of the algorithms. Whether it's voice, face, or other types of detection, people look and sound so different, pictures are shot differently, and from different angles, I cannot fathom how it's all done. Since I already covered booby nudity detection with JavaScript, I thought it would be worth some time to explore face detection. Facebook uses it, so maybe it has application in your websites.
我一直对识别软件很感兴趣，因为我无法想象所有算法中包含的逻辑。 无论是语音，面部还是其他类型的检测，人们的外观和声音都如此不同，照片的拍摄方式也不同，而且从不同的角度看，我无法理解它是如何完成的。 因为我已经讲过 布比 使用JavaScript进行裸露检测 ，我认为值得花一些时间来探索人脸检测。 Facebook使用它，因此它可能已在您的网站中使用。
One face detection library I found is Face Detection by Jay Salvat and Liu Liu. This is a standard jQuery plugin that receives an image and returns an array of coordinates of faces found within the image. Let's have a look at how to use it!
我发现的一个面部检测库是Jay Salvat和Liu Liu的面部检测 。 这是一个标准的jQuery插件，用于接收图像并返回在图像中找到的人脸坐标数组。 让我们看看如何使用它！
jQuery.faceDetection (jQuery.faceDetection)
Four JS files are required for this jQuery plugin:
此jQuery插件需要四个JS文件：
The faceDetection plugin wraps functionality within the first two JavaScript files, and returns an array of objects which represent the coordinates of the faces within the photo (if any are found). An example would be:
faceDetection插件将功能包装在前两个JavaScript文件中，并返回一个对象数组，这些对象代表照片中人脸的坐标(如果找到)。 一个例子是：
var coords = jQuery("#myImage").faceDetection();
/* Returns:
{
x: 525
y: 435,
width: 144,
height: 144,
positionX: 532.6353328125226,
positionY: 443.240976080536,
offsetX: 532.6353328125226,
offsetY: 443.240976080536,
confidence: 12.93120119,
neighbour: undefined,
}
*/
You may also add event callbacks to every call:
您还可以向每个调用添加事件回调：
var coords = jQuery("#myImage").faceDetection({
complete: function(image, coords) {
// Do something
},
error: function() {
console.warn("Could not process image");
}
});
It's up to you what you'd like to do when the faces have been found. You could add a square around the person's face:
发现面Kong后，您要做什么取决于您。 您可以在此人的脸部周围添加一个正方形：
jQuery("img").each(function() {
var img = this;
// Get faces cooridnates
var coordinates = jQuery(img).faceDetection();
// Make boxes if faces are found
if(coordinates.length) {
coordinates.forEach(function(coord) {
jQuery("
", {
css: {
position: "absolute",
left: coord.positionX + 5 + "px",
top: coord.positionY + 5 + "px",
width: coord.width + "px",
height: coord.height + "px",
border: "3px solid white"
}
}).appendTo(img.parentNode);
});
}
});
There's not much more to it than that!
I tried to vary the photos I used faceDetection on and as I expected, the results are the not perfect. They are, however, quite good; no software will be perfect for all cases. The software also does not do facial comparison, so you would need to provide suggestions as to the face's identity via another method. For what this plugin is meant to do, however, it does pretty well. I encourage you to give this a try!
Recent Features
-
Create a CSS Flipping Animation
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...
-
Create a Sheen Logo Effect with CSS
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
Incredible Demos
-
MooTools’ AutoCompleter Plugin
One of the famous MooTools plugins is Harald Kirschner's AutoCompleter plugin. AutoCompleter takes a term input by the user and searches for matches -- an obviously help to the user. Here's how to make the most of Harald's great plugin. The XHTML All we...
-
MooTools TwitterGitter Plugin
Everyone loves Twitter. Everyone loves MooTools. That's why everyone should love TwitterGitter, a MooTools plugin that retrieves a user's recent tweets and allows the user to format them however the user would like. TwitterGitter allows the user to choose the number of...
Discussion
-
Yeah, that will happen with client-side technology like this. In practice, this is better done on the server side, but it’s still fascinating to see on the client side.
-
-
Yep latest FF got an slow/unresponsive script error while loading the demo. Interesting though!
-
Most facial recognition software is done with neural networks….the varied results are because of a limited data set used in training….in theory they can be nearly as good as people at recognizing faces (same technology for voice recognition, OCR (Object Character Recognition), etc.)..it’s essentially pattern matching. I haven’t seen any good neural networks for javascript though, so this is pretty interesting to me.
-
It would be great if the software could also recognize if people wear glasses, ear rings, wrinkles, et cetera. So that you would be able to apply filters on the image library and make selections.
-
-
-
-
-
Tarlenan
This website http://blog.geotitles.com/2011/08/facebook-like-face-detect
had made a similar tutorial using the same jQuery pluign by Jay Salvat, but they have presented many examples on using the plugin.
May be it is useful for your visitors.
-
thank you for sharing, this is realy one of the complex jQuery plugins, but how the f**k they do it ?? have any one a document of the algorithm ? Thank you.
-
-
Hi i would like to recognize only one face from the group photo as well from the single image photo too. So what should i do in the code.
It would be great help if anyone say the solution.
Thanks in advance.
-
Rufus
It works great but when there is no face to detect in a picture it does not trigger the error function, but only the “complete” function.
It does trigger the error function when the pic is below a certain size however.
I tried checking for undefined (and tried null too) in the array like so:
but no dice.
Any suggestions?
I am developing a chrome app so only testing there.
-
Nice Tutorial David.. :) you are really rocking.. please share more tutorials on jQuery..
-
Hi David,
The demo no longer works (in Chrome) because you can no longer embed javascript from raw.github.com .
Sairam
-
-
-
-
-
-
-
The example only highlights one soccer player, the photo with Brad/Angelina, and one photo in the black and white.
-
You could also forego any development and just leverage a pre-existing API service that provides this sort of functionality.
For instance the follow face detection API can be hit from javascript client side or server side.
Face Location https://askmacgyver.com/explore/program/face-location/5w8J9u4z
jQuery("img").each(function() {
var img = this;
// Get faces cooridnates
var coordinates = jQuery(img).faceDetection();
// Make boxes if faces are found
if(coordinates.length) {
coordinates.forEach(function(coord) {
jQuery("
", {
css: {
position: "absolute",
left: coord.positionX + 5 + "px",
top: coord.positionY + 5 + "px",
width: coord.width + "px",
height: coord.height + "px",
border: "3px solid white"
}
}).appendTo(img.parentNode);
});
}
});
There's not much more to it than that!
I tried to vary the photos I used faceDetection on and as I expected, the results are the not perfect. They are, however, quite good; no software will be perfect for all cases. The software also does not do facial comparison, so you would need to provide suggestions as to the face's identity via another method. For what this plugin is meant to do, however, it does pretty well. I encourage you to give this a try!
Recent Features
-
Create a CSS Flipping Animation
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...
-
Create a Sheen Logo Effect with CSS
I was inspired when I first saw Addy Osmani's original ShineTime blog post . The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
Incredible Demos
-
MooTools’ AutoCompleter Plugin
One of the famous MooTools plugins is Harald Kirschner's AutoCompleter plugin. AutoCompleter takes a term input by the user and searches for matches -- an obviously help to the user. Here's how to make the most of Harald's great plugin. The XHTML All we...
-
MooTools TwitterGitter Plugin
Everyone loves Twitter. Everyone loves MooTools. That's why everyone should love TwitterGitter, a MooTools plugin that retrieves a user's recent tweets and allows the user to format them however the user would like. TwitterGitter allows the user to choose the number of...
Discussion
-
-
Yeah, that will happen with client-side technology like this. In practice, this is better done on the server side, but it’s still fascinating to see on the client side.
-
-
Yep latest FF got an slow/unresponsive script error while loading the demo. Interesting though!
-
Most facial recognition software is done with neural networks….the varied results are because of a limited data set used in training….in theory they can be nearly as good as people at recognizing faces (same technology for voice recognition, OCR (Object Character Recognition), etc.)..it’s essentially pattern matching. I haven’t seen any good neural networks for javascript though, so this is pretty interesting to me.
-
It would be great if the software could also recognize if people wear glasses, ear rings, wrinkles, et cetera. So that you would be able to apply filters on the image library and make selections.
-
-
-
-
-
Tarlenan
This website http://blog.geotitles.com/2011/08/facebook-like-face-detect
had made a similar tutorial using the same jQuery pluign by Jay Salvat, but they have presented many examples on using the plugin.
May be it is useful for your visitors.
-
thank you for sharing, this is realy one of the complex jQuery plugins, but how the f**k they do it ?? have any one a document of the algorithm ? Thank you.
-
-
Hi i would like to recognize only one face from the group photo as well from the single image photo too. So what should i do in the code.
It would be great help if anyone say the solution.
Thanks in advance.
-
Rufus
It works great but when there is no face to detect in a picture it does not trigger the error function, but only the “complete” function.
It does trigger the error function when the pic is below a certain size however.
I tried checking for undefined (and tried null too) in the array like so:
but no dice.
Any suggestions?
I am developing a chrome app so only testing there.
-
Nice Tutorial David.. :) you are really rocking.. please share more tutorials on jQuery..
-
Hi David,
The demo no longer works (in Chrome) because you can no longer embed javascript from raw.github.com .
Sairam
-
-
-
-
-
-
-
The example only highlights one soccer player, the photo with Brad/Angelina, and one photo in the black and white.
-
You could also forego any development and just leverage a pre-existing API service that provides this sort of functionality.
For instance the follow face detection API can be hit from javascript client side or server side.
Face Location https://askmacgyver.com/explore/program/face-location/5w8J9u4z
367
到【灌水乐园】发言
iPad almost burned when browsing the demo page.