Распознавание лиц в 4 строки на JQuery



Распознавание лиц может быть полезно во многих ситуациях. Например, если вам нужно обрезать аватар и не задеть при этом лицо юзера или вы хотите дать пользователям удобный способ отмечать своих друзей на фото и видео.

Я расскажу о том, как в несколько строк реализовать распознавание любого количества лиц на любой фотографии или видео в браузере с помощью JavaScript и JQuery плагина FaceDetection.

Кому интересно, прошу под кат.

Для начала нужно установить последнюю версию плагина FaceDetection. Сделать это можно скачав архив на официальном сайте или на GitHub.

Так же доступна установка через Bower и NPM
Bower:
bower install jquery.facedetection

NPM:
npm install jquery.facedetection


После установки плагина необходимо создать HTML страницу и подключить к ней JQuery и плагин FaceDetection:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="path/to/dist/jquery.facedetection.min.js"></script> 

Попробуем протестировать плагин. Для начала перемещаем в папку с HTML страницей любую картинку с лицом (в моем случае это будет photo.png) и подключаем её к странице тегом img:

<img id="photo" src="photo.png" alt="photo" />

Теперь добавим на страницу немного (4 строки) JavaScript кода с использованием FaceDetection для распознавания лиц:

$('#photo').faceDetection({
       complete: function (faces) {
       console.log(faces);
}});

И посмотрим в консоль браузера, открыв в нём эту страницу. В случае успешного распознавания мы увидим там что-то такое:



Теперь давайте разберем каждый из этих пунктов отдельно.

width — ширина лица
height — высота лица
x — координаты лица по оси X
y — координаты лица по оси Y
positionX — позиция X относительно документа
positionY — позиция Y относительно документа
offsetX — позиция X относительно родительского элемента
offsetY — позиция Y относительно родительского элемента
scaleX — соотношение между реальной и отображаемой шириной картинки
scaleY — соотношение между реальной и отображаемой высотой картинки

Теперь на основе этих знаний мы уже можем написать код для визуализации распознавания лица. Проще говоря, мы будем обводить лица цветной рамкой.

Сначала добавим на нашу HTML страницу немного CSS кода для создания рамки:

.face {
    position: absolute;
    border: 4px solid white;
 }

Если нужно, вы можете добавить в CSS параметр border-radius, который из квадратной рамки сделает круглую, так как лица чаще бывают круглые, чем квадратные. Я же на этом этапе пока обойдусь без этого.

Теперь усовершенствуем наш JavaScript код, сделаем так, чтобы он выводил рамку именно там, где на фотографии находится лицо.

 $('#photo').faceDetection({
    complete: function (faces) {
	    console.log(faces);
	    for (var i = 0; i < faces.length; i++) {
	        $('<div>', {
	            'class': 'face',
	            'css': {
	            'position': 'absolute',
	            'left':     faces[i].x * faces[i].scaleX + 'px',
	            'top':      faces[i].y * faces[i].scaleY + 'px',
	            'width':    faces[i].width  * faces[i].scaleX + 'px',
	            'height':   faces[i].height * faces[i].scaleY + 'px'
	            }
	        })
	    .insertAfter(this);
	    }
    },
    error:function (code, message) {
        alert('Error: ' + message);
});

Сохраняем HTML страницу и запускаем в браузере. В результате вы должны получить фотографию, на которой лицо обведено белой рамкой.

Вот что получилось у меня:



На этом всё, самое простое приложение по распознаванию лиц готово.

Совет: уменьшайте и сжимайте изображения перед началом распознавания, это ускорит процесс распознавания и уменьшит риск зависания браузера пользователя.

Распознавание лиц на видео делается почти таким-же способом, только вместо изображения вы добавляете на страницу видео.

Также должен сказать, что иногда распознавание работает неправильно. В любом случае, вы можете попробовать исправить ошибки в плагине или алгоритме, исходники доступны на GitHub.

Надеюсь, эта статья смогла вам помочь в реальных проектах или просто была полезна. Спасибо за прочтение, %username%!
  • –3
  • 21,7k
  • 8
Поделиться публикацией

Похожие публикации

Комментарии 8

    +11
    Статья сводится к:

    — анонсу JS-библиотеки jquery.facedetection;
    — ликбезу о том, как подключить тривиальный jQuery-плагин.

    Про jquery.facedetection мы знаем из дайджеста месячной давности, но за напоминание спасибо.

    Про то, как подключать jQuery-плагин, мы знаем из… ну мы же не имбецилы, в самом деле.

    PS В карму плюсанул.
      –11
      Спасибо за прочтение. Рад, что Вам понравилось.
      +6
      Миленькая статейка, но ни на jQuery, ни в 4 строчки:)
        –1
        Таки на JQuery (на плагине к JQuery) и базовая программа в 4 строчки. Но суть не в строчках, а в том, что распознавание лиц это просто и сейчас любой может его сделать, ведь есть FaceDetection и подобные скрипты. Спасибо за отзыва.
          +1
          $('#photo').faceDetection({
              complete: function (faces) {
                  console.log(faces);
                  for (var i = 0; i < faces.length; i++) {
                      $('<div>', {
                          'class': 'face',
                          'css': {
                          'position': 'absolute',
                          'left':     faces[i].x * faces[i].scaleX + 'px',
                          'top':      faces[i].y * faces[i].scaleY + 'px',
                          'width':    faces[i].width  * faces[i].scaleX + 'px',
                          'height':   faces[i].height * faces[i].scaleY + 'px'
                          }
                      })
                  .insertAfter(this);
                  }
              },
              error:function (code, message) {
                  alert('Error: ' + message);
          });
          


          Это не 4 строчки ну никак:)
          jQuery там как собаке пятая нога. Очевидно, что если он и используется в этом плагине, то исключительно для посылки AJAX-запроса.
        0
        Скрипту не хватает самой малости — задаваемого таймаута, по истечении которого он прерывает работу, даже если процесс распознавания не завершен.
          +2
          Так это не в 4 строки, а желтый заголовок. Можно взять готовую утилиту и сказать что это распознавание лиц в 0 строк. Сколько строк в реализации — не учитывается.
            +6
            В любом случае, вы можете попробовать исправить ошибки в плагине или алгоритме, исходники доступны на GitHub.
            Вот спасибо! У меня как раз число случайно есть алгоритм стопроцентного распознавания лиц. Вот ни у Гугла, ни у Эпла, ни у Фейсбука нет, а у меня есть. Только я не знал, где найти проект, в котором можно поправить алгоритм. А теперь знаю! Теперь-то поправлю!

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое