Розпізнавання осіб в 4 рядки JQuery



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

Я розповім про те, як в кілька рядків реалізувати розпізнавання будь-якої кількості осіб на будь-якої фотографії або відео в браузері за допомогою JavaScript, JQuery плагін FaceDetection.

Кому цікаво, прошу під кат.

Для початку потрібно встановити останню версію плагіна FaceDetection. Зробити це можна скачавши архів на офіційному сайті або GitHub.

Так само доступна установка через Bower і NPMBower:
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%!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.