使用 javascript 和 html5 进行眼睛检测
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14134927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Eye Detection using javascript and html5
提问by Oli Soproni B.
Does anyone have any ideas or steps or algorithms for performing Eye Detection on 2d images using javascript and HTML5?
有没有人有使用 javascript 和 HTML5 对 2d 图像执行眼睛检测的任何想法、步骤或算法？
I have already done converting RGB to YCbCr color space
我已经完成将 RGB 转换为 YCbCr 颜色空间
Now I need some help on eye extraction
现在我需要一些眼球摘除方面的帮助
function hellow(e)
{
var r,g,b,a,gray;
var imageData = ctxBg.createImageData(gameWidth,gameHeight);
var das =imageData.data;
for(var i=0;i<=800;i++)
{
for(var j=0;j<=640;j++)
{
var d = (j*imageData.width+i)*4;
var helow = ctxBg.getImageData(i,j,1,1);
r=helow.data[0];
g=helow.data[1];
b=helow.data[2];
a=helow.data[3];
das[d]=Math.round((0.299 *r) - (0.168935*g) + (0.499813*b));
das[d+1]=Math.round((0.587 *r) - (0.331665*g) + (0.418531*b));
das[d+2]=Math.round((0.114 *r) - (0.50059*g) + (0.081282*b));
das[d+3]=a;
console.log(das[d]+":"+das[d+1]+":"+das[d+2]);
}
}
ctxBg.putImageData(imageData,0,0);
//console.log('c');
e.preventDefault();
}
That's my code for converting the rgb to YCbCr color space.
这是我将 rgb 转换为 YCbCr 颜色空间的代码。
Please help me also improve the code for faster execution.
请帮助我改进代码以加快执行速度。
回答by Tomasz Szarzyński
What i did recently trying to solve same problem was:
我最近试图解决同样的问题是：
Scale down processed image to achieve decent performance (I downscaled everything to 320px width)
Detect face in image using Core Computer Vision Library - https://github.com/liuliu/ccv
Based on the detected face rectangle information detect eyes using HAAR object detector (it has cascade for eyes only detection - https://github.com/inspirit/jsfeat
缩小处理后的图像以获得不错的性能（我将所有内容缩小到 320px 宽度）
使用核心计算机视觉库检测图像中的人脸 - https://github.com/liuliu/ccv
基于检测到的人脸矩形信息，使用 HAAR 对象检测器检测眼睛（它具有仅用于眼睛检测的级联 - https://github.com/inspirit/jsfeat）
For step 2 i also used "grayscale" and "equalize_histogram" from JSFEAT library.
对于第 2 步，我还使用了 JSFEAT 库中的“灰度”和“均衡直方图”。
Also if step 3 fails you can try to guess eyes position (depends on how high accuracy you're going for).
此外，如果第 3 步失败，您可以尝试猜测眼睛的位置（取决于您要达到的准确度有多高）。
This workflow gave me satisfying results and performance. It tested it both on desktop (~500ms on iMac) and mobile devices (~3000ms on iphone 4 using image from webcam). Unfortunately I cannot post a link to working example at this point, but i'll post a link to github once i have something there.
这个工作流程给了我令人满意的结果和性能。它在台式机（iMac 上约 500 毫秒）和移动设备（iPhone 4 上使用网络摄像头图像约 3000 毫秒）上对其进行了测试。不幸的是，此时我无法发布指向工作示例的链接，但是一旦我有一些东西，我就会发布指向 github 的链接。
回答by German Attanasio
You can use tracking.jsto detect eyes using various techniques from a real scene captured by the camera.
您可以使用tracking.js从相机捕获的真实场景中使用各种技术来检测眼睛。
Once you import the script with the library and add the canvas to the HTML you can do something like:
使用库导入脚本并将画布添加到 HTML 后，您可以执行以下操作：
var videoCamera = new tracking.VideoCamera().hide().render().renderVideoCanvas(),
ctx = videoCamera.canvas.context;
videoCamera.track({
type: 'human',
data: 'eye',
onFound: function(track) {
for (var i = 0, len = track.length; i < len; i++) {
var rect = track[i];
ctx.strokeStyle = "rgb(0,255,0)";
ctx.strokeRect(rect.x, rect.y, rect.size, rect.size);
}
}
});
The code above comes from one of the examples in the library. Hope that help you
上面的代码来自库中的示例之一。希望能帮到你
回答by Endre Simo
I don't really know if something specifical is implemented only for eye detection, but for face detection you should look after a library named as Core Computer Vision Library, which is hosted on github: https://github.com/liuliu/ccv.
我真的不知道是否只为眼睛检测实现了一些特定的东西，但是对于人脸检测，您应该照顾一个名为 Core Computer Vision Library 的库，该库托管在 github 上：https: //github.com/liuliu/ccv.
Another possibility would be https://github.com/inspirit/jsfeat, where face, and pixel edge detection is implemented using different algorithms, like Lucas-Kanade optical flow and HAAR object detector.
另一种可能性是https://github.com/inspirit/jsfeat，其中面部和像素边缘检测使用不同的算法实现，如 Lucas-Kanade 光流和 HAAR 对象检测器。
Please read this post for further techniques: Face detection javascript/html5/flash
请阅读这篇文章以了解更多技术：人脸检测 javascript/html5/flash
回答by Konstantin Pribluda
I daresay that luminance only could be enough to detect eye / face position - so you can make your code faster by just dripping computation of CbCr. One usually looks for yeas / faces using Haar cascade:
我敢说亮度只能检测眼睛/面部的位置——所以你可以通过滴加 CbCr 的计算来使你的代码更快。人们通常使用 Haar 级联查找是/面孔：
回答by Nikos M.
There is an example of eye detection (with custom eye haar openCV cascades) in pure javascript/html5 using the HAAR.jslibrary (ps i am the author).
有一个使用HAAR.js库（ps 我是作者）在纯 javascript/html5 中进行眼睛检测的示例（使用自定义 eye haar openCV 级联）。
The project is stopped, no new features added, but it does what it states.
该项目已停止，未添加任何新功能，但它会执行其声明的操作。
回答by OnlyJS
For eye detection use OpenCV.js , check this Human Eye Detection using Javascript and OpenCV
对于眼睛检测使用 OpenCV.js，检查这个使用 Javascript 和 OpenCV 的人眼检测
let faceCascadeFile = 'haarcascade_frontalface_default.xml';
let eyeCascadeFile = 'haarcascade_eye.xml';
utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
utils.createFileFromUrl(eyeCascadeFile, eyeCascadeFile, () => {
console.log('eye cascade ready');
})
})
Example
例子
