Наука
★ Рубрика: Наука
★ Тема: трекинг, Javascript

Находим лица на фотке

Здесь приведена демонстрация плагина, позволяющего находить и отмечать лица на фотографиях. Нажмите кнопку под фоткой для запуска поиска. Для загрузки новой картинки (случайно выводится одна из семи картинок) - жмите "Обновить". Для реализации использован JavaScript.
Найти лица Обновить
Плагин нельзя назвать совершенным. Он иногда ошибается. Но, все таки это уже кое-что. Автоматическое распознавание лиц на фотках может пригодиться во многих случаях. Например, для автоматического создания аватарок пользователей или для подсчета числа людей на фото. Для установки на вашу страницу надо скачать сам плагин: здесь. Затем подключить скрипты:
Прописать стили контейнеров, в которых будут размещаться фото и стили самих меток:

 .picture-container {
 position: relative;
 width: 600px;
 height: auto;
 margin: 10px auto;
 border: 10px solid #fff;
 box-shadow: 1px 3px 5px 5px #cecece;
 }
 .picture {
 display: block;
 width: 100%;
 height: auto;
 }
 .face {
 position: absolute;
 border: 2px solid #FFF;
 }
А также скрипт для управления плагином:
 $(function () {
 "use strict";
 
 $('#try-it').click(function (e) {
 e.preventDefault();
 $('.face').remove();
 $('#picture').faceDetection({
 complete: function (faces) {
 console.log(faces);
 
 for (var i = 0; i < faces.length; i++) {
 $('
', { '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); } }); }); });
Затем разместить фото на страницу и кнопку запуска поиска:
< div class="picture-container">
 < img id="picture" class="picture" src="/picture/grafika/faces.jpg">
 <⁄div> < a id="try-it" href="#">Найти лица<⁄a>
Посмотреть пример применения этого скрипта для идентификации лица на видео можно здесь.
 Похожие публикации: трекинг, Javascript

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]