Nhận diện khuôn mặt với Jquery Face Detection

13/08/2019

Đa số các phần mềm nhận dạng trên mạng đều hấp dẫn tôi, vì tôi không thể tưởng tượng được logic cũng như thuật toán của nó như thế nào?

Cho dù đó là giọng nói, khuôn mặt, hoặc âm thanh rất khác nhau, hình ảnh được chụp khác nhau, và từ nhiều góc độ khác nhau, tôi không thể hiểu được làm thế nào nó được như vậy.

Kể từ khi tôi làm việc với nudity detection with JavaScript, tôi đã nghĩ rằng đây là một Plugin giá trị, và một ngày nào đó sẽ có phần Plugin nhận diện khuôn mặt. Facebook đã sử dụng nó, vì vậy có thể nó có ứng dụng tích hợp trong các trang web của bạn.

Một thư viện nhận diện khuôn mặt mà tôi tìm thấy là Jquery Face Detection của 2 tác giả Jay Salvat và Liu Liu. Đây là một plugin jQuery tiêu chuẩn. Chúng nhận hình ảnh và trả về một mảng các tọa độ của khuôn mặt được tìm thấy trong các hình ảnh đó. Chúng ta hãy xem cách sử dụng nó thế nào nhé! Yêu cầu đầu tiên là bạn phải thêm 3 file Javascript vào trong web:

<script src="jquery-1.4.3.min.js"></script> 
<!-- mas js --> 
<script src="facedetection/ccv.js"></script> 
<script src="facedetection/face.js"></script> 
<script src="jquery.facedetection.js"></script>

Plugin Jquery Face Detection sẽ chạy hai files JavaScript đầu tiên, và trả về một mảng các đối tượng đại diện cho các tọa độ của các khuôn mặt trong các bức ảnh (nếu có được tìm thấy). Ví dụ:

var coords = jQuery("#myImage").faceDetection();

Chúng ta cũng có thể thêm vào các sự kiện CallBack:

var coords = jQuery("#myImage").faceDetection({ 
   complete: function(image, coords) { 
                   // Do something 
           }, 
    error: function() { 
                   console.warn("Could not process image"); 
           } 
});

Nó sẽ làm tiếp những gì bạn muốn khi khuôn mặt được phát hiện. Ta cũng có thể thêm 1 hình vuông xung quanh khuôn mặt được phát hiện bằng cách sau:

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("<div>", { 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);
        });
    }
});

Tôi đã thử nhiều lần bằng cách thay đổi các tấm ảnh để nhận diện. Kết quả thì không được hoàn hảo. Một số nhận diện được, một số thì không. Tuy nhiên với Plugin này, nó cũng đã là khá tốt rồi. Vì hiếm có 1 phần mềm nào có thể hoàn hảo trong mọi trường hợp đúng không ? Với Plugin này, ít nhất nó cũng đã cho mình ta những gì mình muốn. Nên tôi khuyên bạn nên dùng thử xem nó tốt tới mức nào.

Article Categories:
Jquery

Comments are closed.