JQuery - Reconocimiento facial con Jquery

   
Vista:

Reconocimiento facial con Jquery

Publicado por edu (2 intervenciones) el 15/03/2018 12:51:37
Hola estoy intentando usar una libreria de Jquery que he encontrado para el reconocimiento facial por internet y el ejmplo que dan funciona correctamente. Pero cuando me he puesto a hacer algo diferente al ejemplo me ha dado error.

Mi idea seria poder implementarlo en una pagina web es decir, que tu puedas subir una foto con la etiqueta <input> y entonces que te diga si hay o no hay una cara. El problema viene que cuando uso el input me dice face detection(nombre de la libreria) is possible on images, videos..

Si uso la etiqueta <img> con el atributo src="" con una ruta estatica me funciona. Por lo que yo veo y entiendo usando el input no me lo detecta la imagen como una imagen ya que me dice el error que he comentado antes. Claro lo que yo veo logico es que el usuario pueda cargar una imagen de manera local a la web y ver si hay caras en esa foto, no con una ruta estatica que siempre saldria la misma.

Por lo que yo llego a pensar, la solucion seria que el valor del input me lo reconociera como una imagen o quizas me detecta la ruta como un string y no como una imagen..
Porque si con el post o get obtendria el id del input me funcionaria?
Quizas son tonterias lo que he pensado igualmente nose como implementarlo asi que si me dais una ayudita :D

Link librerias y ejemplo: http://www.desarrollolibre.net/blog/tema/129/jquery/deteccion-de-caras-con-jquery#.WqluKehubIU

Mi codigo:

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
30
31
32
33
34
<form action="prueba.html" method="post" enctype="multipart/form-data">
	<input type="file" name="fileToUpload" id="fileToUpload"><br><br><br>
	<!--<div class="picture-container">
        <img id="picture" class="picture" src="imagen.png">
    </div>-->
	<input type="submit" value="prova" name="submit">
</form>
<script src="jquery.min.js"></script>
<script src="jquery.facedetection.min.js"></script>
<script>
    $('#picture').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);
        }
    });
 
</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de santi

Reconocimiento facial con Jquery

Publicado por santi (34 intervenciones) el 18/03/2018 22:39:16
Hola,

a ver, si lo que quieres es que se detecte la "cara" cuando el usuario añade un archivo primero tendrías que poder leer la imagen y después utilizar el "faceDetention":

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(document).on('change', '#fileToUpload', function(){
    var img = $('#picture');
    readURL(this, img);
});
 
//esta función renderiza la imagen seleccionada por el usuario y la añade en el src de la imagen
function readURL(input, img){
 
if (input.files && input.files[0]) {
    var reader = new FileReader();
 
    reader.onload = function (e) {
        img.attr('src', e.target.result);
    }
 
    reader.readAsDataURL(input.files[0]);
 
    function face(img);
}
 
//función faceDetection para averiguar si es una cara
function face(img){
    img.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);
        }
    });
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad