前端人臉識別框架Tracking.js與JqueryFaceDetection

這篇文章主要就介紹兩種前端的人臉識別框架（Tracking.js和JqueryFaceDetection）

 

技術特點

 

Tracking.js是使用js封裝的一個框架，使用起來需要自己配置許多的東西，略顯復雜

JqueryFaceDetection是使用jquery封裝的框架，只留下一個接口，比較方便

 

使用說明

如何下載js文件我就不說了，可以直接百度

Tracking.js

Tracking.js需要先引入tracking-min.js，然后根據你的需求在選擇性的引入eye-min.js,face-min.js,mouth-min.js。

        //        tracking.ObjectTracker()接受數組參數將你想要標記的對象分類（比如臉部整體、眼睛、鼻子、嘴巴等）。
        //        setStepSize()規定用來標記的方框的步長。
        //        我們把要標記的對象和track事件進行綁定，一旦我們要標記的對象完成初始化，就會觸發track事件。
        //        數據（Data）保存在對象數組列表中，其中的值是每一個標記對象的長、寬以及x、y坐標。
        window.onload = function () {
            var img = document.getElementById('img');
            var tracker = new tracking.ObjectTracker(['face']); // Based on parameter it will return an array.
//            tracker.setStepSize(1.7);
            tracking.track('#img', tracker);
            tracker.on('track', function (event) {
                if (event.data.length === 0) {
                    alert("無人臉")
                } else {
                    event.data.forEach(function (rect) {
//                        console.log(event)
                        console.log(rect)
                        draw(rect.x, rect.y, rect.width, rect.height);
//                        alert("有人臉")
                    });
                }
            });
            //畫方框
            function draw(x, y, w, h) {
                var rect = document.createElement('div');
                document.querySelector('.imgContainer').appendChild(rect);
                rect.classList.add('rect');
                rect.style.width = w + 'px';
                rect.style.height = h + 'px';
                rect.style.left = (img.offsetLeft + x) + 'px';
                rect.style.top = (img.offsetTop + y) + 'px';
            };
        };

　　

JqueryFaceDetection

 

JqueryFaceDetection是使用jquery封裝的，所以需要引入jquery，接着再引入jquery.facedetection.js就可以了。總的來說，引入的文件比較少。

$(function () {
    $('#img').faceDetection({
        complete: function (faces) {
            if (faces.length == 0) { //說明沒有檢測到人臉
                alert("無人臉")
            } else {
                for (var i in faces) {
                    draw(faces[i].x, faces[i].y, faces[i].width, faces[i].height);
                }
            }
        },
        error: function (code, message) {
            alert("complete回調函數出錯")
        }
    })
})

　　

以上是js部分的代碼。

接着只需要在你的頁面中加一張圖片即可

 

<img id="img" src="assets/PositiveFace/1.jpg"/>

 

驗證結果

Tracking.Js

 

其實還有一張我的自拍照(識別不出來)，我就不上傳了。總的來說，我不推薦這個框架。

JqueryFaceDetection

 

 

看起來識別率似乎是比Tracking.js低一些，但是至少猩猩的臉是識別不出來的，而且強光圖和半張臉的陰暗圖識別不出來應該是可以接受的。推薦使用