Detectar faces em imagens usando jquery e facedetection

Olá pessoal. Tudo bem com vocês?

No post de hoje ensinar para vocês uma técnica bem legal para fazer o reconhecimento de faces em imagens utilizando jquery e o plugin facedetection. Para os dinossauros que usaram o orkut sabem bem do que estou falando. A rede social disponibilizava (não sei se ainda disponibiliza) nas fotos dos usuários a possibilidade de marcar as pessoas fotografadas de acordo com o reconhecimento facial.

Bom. Então vamos lá. Mãos à massa!Para começar vamos organizar nossa estrutura de arquivos e diretórios da seguinte maneira:

  • img
    • foto.jpg
  • js
    • ccv.js
    • detectar.js
    • face.js
    • jquery.js
    • jquery.facedetection.js
  • index.html

Dentro da pasta img colocamos uma foto qualquer (com boa resolução) e que obviamente tenha um rosto bem focalizado. Na pasta js colocamos os arquivos do facedetection, o jquery e o arquivo onde faremos a mágica acontecer (que é o detectar.js).

Começando pela implementação do arquivo index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <title>Face Detection</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery.js" ></script>
        <script type="text/javascript" src="js/face.js" ></script>
        <script type="text/javascript" src="js/ccv.js" ></script>
        <script type="text/javascript" src="js/jquery.facedetection.js" ></script>
        <script type="text/javascript" src="js/detectar.js" ></script>
        <style>
            .face{ border: 1px solid #fff; }
        </style>
  </head>
  <body>
        <div id="content">
            <a href="#" id="detectar">Detectar faces</a>
            <br />
            <img src="img/foto.jpg" />
        </div>
  </body>
</html>

Das linhas 6 à 10 fazemos à importação de todos os arquivos js que utilizaremos. Na linha 12 coloco uma regra css para estilizar o quadro que focará o rosto na foto. Depois crio dentro da tag body uma div chamada content e dentro dela coloco um link e a imagem a ser analisada. O processo de detecção da face ocorrerá justamente quando o link for acionado (por isso a importância da definição de um id para ele).

Agora vamos implementar a função no arquivo detectar.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(function() {
    $('#detectar').click(function() {
        var $this = $(this);
 
        var coords = $('img').faceDetection({
            complete:function() {
                $this.text('Face encontrada!');
            },
            error:function(img, code, message) {
                $this.text('error!');
                alert('Erro: '+message);
            }
        });
        for (var i = 0; i < coords.length; i++) {
            $('<div>', {
                'class':'face',
                'css': {
                    'position': 'absolute',
                    'left':     coords[i].positionX +'px',
                    'top':      coords[i].positionY +'px',
                    'width':    coords[i].width     +'px',
                    'height':   coords[i].height    +'px'
                }
            })
            .appendTo('#content');
        }
    });
    return false;
});

Através da execução da função faceDetection(linha 5) ele armazena na variável coords os pontos que configuram o rosto encontrado. Dentro da chamada da função já é definido também as ações para caso de sucesso e erro.

Depois,  de acordo com as coordenadas encontradas, é criado uma div chamada face dentro da #content que envolve a face da pessoa na foto.

E fim!!!

Para ver o resultado dessa experiência, clique aqui. Para baixar os arquivos utilizados na explicação, clique aqui.

Fique à vontade para testar com mais fotos.

Visite a página oficial do plugin: http://facedetection.jaysalvat.com/

Abs!

É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.

Posts relacionados

Comentários

  1. Sei que o post e antigo, mas só para vermos a evolução mesmo das redes sociais e plataformas em geral, onde hoje em dia tudo tem facedetection ( facebook, google+, picasa,,etcs!)! De qualquer forma par quem quer fazer do zero essa dica com Jquery ( que uso muito!) É muito boa Rafael!

Deixe um comentário

O seu endereço de e-mail não será publicado.