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!
Rafael Wendel Pinheiro
É 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.
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!