API-интерфейс для распознавания лиц на JavaScript
Разработчик Крис Бонгерс поделился в блоге на dev.to методом создания детектора лиц на JavaScript.
В отличие от предыдущей разработки автора, сканера штрих-кода, интерфейс по распознаванию лиц еще не находится в общем доступе, но его можно включить в Chrome, установив соответствующий флаг. Для этого:
- Введите в адресной строке браузера:
chrome://flags
; - В открывшемся окне включите Experimental Web Platform features —
#enable-experimental-web-platform-features
.
Конечным результатом будет API-интерфейс для обнаружения лиц на картинке.
Создание интерфейса распознавания лиц
- Чтобы создать API-интерфейс распознавания лиц выполните следующие команды:
const faceDetector = new FaceDetector(); // Pass options: const faceDetector = new FaceDetector({ maxDetectedFaces: 5, fastMode: false });
#С помощью команды maxDetectedFaces
можно устанавливать количество лиц для обнаружения.
#Команда fasteMode
определяет скорость распознавания. Если режим включен, лица обнаруживаются быстрее, но с меньшей точностью.
- Далее вызываем функцию распознавания и передаем ей информацию об источнике, в нашем случае это будет картинка (image).
try { const faces = await faceDetector.detect(image); faces.forEach(face => doSomething(face)); } catch (e) { console.error('Face detection failed:', e); }
- Загружаем изображение.
<img src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80" crossorigin alt="Group of people" />
- С помощью кода ниже можно заставить функцию загрузки окна ждать, пока все компоненты загрузятся.
window.onload = () => { detect(); };
- Вызываем функцию обнаружения. Она будет асинхронной.
async function detect() { const image = document.querySelector('img'); const faceDetector = new FaceDetector({fastMode: true}); try { const faces = await faceDetector.detect(image); faces.forEach(face => { console.log(face); }); } catch (e) { console.error('Face detection failed:', e); } }
#Функция вызывает выбранное изображение и запускает детектор в быстром режиме.
- Добавляем рамки поверх лиц, чтобы было видно, на что смотреть и оборачиваем изображение в относительный держатель (relative holder).
<div id="holder"> <img src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80" crossorigin alt="Group of people" /> </div>
- Держатель будет относительным элементом, а изображение — абсолютно позиционированным.
img { position: absolute; } #holder { position: relative; }
- При захвате лиц можно получить значения ширины, высоты, вершины и левого края каждой рамки.
const faces = await faceDetector.detect(image); faces.forEach(face => { const {top, left, width, height} = face.boundingBox; const faceDiv = document.createElement('div'); faceDiv.className = 'face'; Object.assign(faceDiv.style, { width: `${width}px`, height: `${height}px`, left: `${left}px`, top: `${top}px` }); holder.appendChild(faceDiv); });
- Создаем div-элемент со свойством className
face
, устанавливаем для него стили и добавляем его в держатель div.
.face { position: absolute; border: 2px solid yellow; }
Вот и все. Конечный результат автор разместил в онлайн-редакторе кода CodePen здесь.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: