【问题标题】:Track eye balls using tracking.js使用 tracking.js 跟踪眼球
【发布时间】:2015-05-11 12:14:35
【问题描述】:

我正在使用 html5 画布处理红眼去除效果。我使用 tracking.js 来跟踪眼睛。检查以下代码。

HTML

<!-- Include tracking js libraries -->
<script src="js/tracking-min.js"></script>
<script src="js/eye-min.js"></script>

<img id="sourceImg" src="red_eye1.jpg"  width="202" height="187">
<canvas id="myCanvas" width="202" height="187" style="border:1px solid #d3d3d3;"></canvas>

Javascript

document.getElementById("sourceImg").onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("sourceImg");
    ctx.drawImage(img, 0, 0);

    // track eyes
    var tracker = new tracking.ObjectTracker(['eye']);
    tracker.setStepSize(1.7);
    tracking.track('#sourceImg', tracker);
    tracker.on('track', function(event) {
        event.data.forEach(function(rect) {
            // rect consists area of each eyes.
            var imgData = ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
            // remove red eye
            var i;
            for (i = 0; i < imgData.data.length; i += 4) {
                // find and check red intensity
                var redIntensity = (imgData.data[i] / ((imgData.data[i+1] + imgData.data[i+2]) / 2));
                if (redIntensity > 1.5)  // 1.5 because it gives the best results
                {
                    // reduce red to the average of blue and green
                    imgData.data[i] = (imgData.data[i+1] + imgData.data[i+2]) / 2;
                }
            }
            ctx.putImageData(imgData, rect.x, rect.y);

        });
    });  
};

我得到了以下结果。

这里红眼已成功去除。但它影响了眼睛周围的颜色。因为 tracking.js 返回的眼睛区域包括周围区域。如何跟踪眼球,这将解决这个问题。

【问题讨论】:

    标签: javascript image-processing html5-canvas face-detection tracking.js


    【解决方案1】:

    快速浏览一下 TrackingJS 就会发现,它并没有提供带红色边框的“眼睛区域”并将其细化为仅虹膜。

    因此,您必须找到提供此优化的跟踪应用程序或自己编写优化代码。

    在 Stackoverflow 中推荐一个虹膜跟踪库是题外话,并且进行虹膜跟踪的代码答案过于宽泛,无法作为一个好的 Stackoverflow 答案。

    话虽如此,下面是verrrrrry寻找虹膜的大致大纲:

    • 从TrackingJS检测到的“眼睛区域”开始,

    • 通过对该眼睛区域中最白像素的颜色测试来获取巩膜的边界框,

    • 在此边界框中,通过对 2 个巩膜区域之间最暗像素的颜色测试来获得圆形瞳孔区域。

    • 以圆形瞳孔为基础,通过向外扩大瞳孔圆的半径直到到达白色巩膜来找到​​虹膜。

    [其他想法]

    我继续思考许多需要处理的非标准情况:

    • 眼睑闭合或眯眼,

    • 虹膜完全向左或向右,没有包裹虹膜的白色边界,

    • 由于黄疸或血丝,巩膜颜色不够清晰,

    • 可能比 sclara 更白的眼部化妆品,

    • 镜头光晕和反射等照片瑕疵,

    • 还有更多我没想到的!

    如果您的项目允许,如果用户单击 2 个瞳孔并扩大瞳孔半径以定义虹膜,会容易得多。瞳孔可能比其他眼睛结构更暗,并且是圆形的(但可能被眼睑夹住)。

    如果您的项目不允许用户选择瞳孔,您可以使用“边缘检测”算法来隔离瞳孔(可能是 Sobel 边缘检测)。

    【讨论】:

    • 谢谢,我试试这个。
    • 根据经验:我可以说这可能不会像听起来那样好用。没有两张图像在颜色上是相同的(白平衡、光温、软/硬光、阴影、肤色、环境光、入射光等),此外还会有噪点、眼球颜色等因素。使用颜色将迫使您调整参数以适合这幅图像。它可能不适用于下一张图像。您需要进行特征检测,而不是使用颜色。我的 2 美分..
    • @KenFyrstenberg,你能推荐任何查找虹膜的库吗?
    • @Sajith 我认为 tracker.js 可用于首先进行眼睛检测,然后在该区域内进行特征检测(它似乎也支持自定义跟踪),但我不熟悉该库。不幸的是不知道其他任何事情。
    • @KenFyrstenberg。是的,我在睡觉前写了这篇文章,但我的脑海里一直在想许多需要处理的非标准案例(正如你评论的那样):-(我已经在我的帖子中添加了这些担忧。不过,使用颜色在我看来,变化仍然是捕捉最常见眼睛情况的一个很好的“第一关”(==眼睛睁开,几乎没有遮挡条件)但是,如果你使用特征检测(也许是 Sobel 边缘检测)的想法可能会更直接大量的遮挡条件可能适用)。这是一个有趣的问题,我希望我有更多的时间去探索!
    猜你喜欢
    • 2015-11-12
    • 2015-02-03
    • 1970-01-01
    • 2014-11-15
    • 2018-09-01
    • 1970-01-01
    • 2017-09-10
    • 1970-01-01
    • 2017-01-03
    相关资源
    最近更新 更多