Extraer el texto de una imagen con JavaScript

por:

Extraer el texto de una imagen con JavaScript

Una de las técnicas de inteligencia artificial más estudiadas es la denomiada OCR (Reconocimiento Óptico de Caracteres), la cual consiste en extraer el texto que hay en una imagen.

Por qué es útil el OCR

Hoy en día, encontramos multitud de situaciones donde parte de los documentos o medios en los que trabajos son digitales y otra parte analógicos. Como todos sabemos los ordenadores trabajan muy bien con la parte digital, ya que así están pensados, sin embargo se comportan bastante mal cuando tienen que tratar con datos que no son digitales, como por ejemplo:

  • Cantidades escritas a mano (facturas, contratos, cheques…)
  • Direcciones escritas a mano (envíos, paquetería, facturas…)
  • Indicaciones escritos a mano (comentarios, modos de uso…)

Para intentar salvar todos los problemas anteriores, se aplican técnicas de OCR, las cuales parten de una imagen donde está el texto a reconocer y, con un conjunto de algoritmos ya entrenados, son capaces de extraer en mayor o menor medida el texto que hay en esas imágenes.

Extrayendo el texto de una imagen con JavaScript usando Tesseract

Lo primero de todo me gustaría indicar que la biblioteca de JavaScript con la que vamos a trabajar, no funciona correctamente con imágenes cuyo texto está escrito a mano. Así que en la demostración siguiente la usaré para extraer texto escrito a ordenador de una fotografía.

La bibloteca, así como la manera de utilizarla podéis encontrarla aquí.

Demostración

La demostración está basada en el siguiente código:

<!DOCTYPE html>
<html>
    <head>
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
    </head>
    <body>
        <img id="img1" src="https://i1.wp.com/lenguajedeprogramacion.com/wp-content/uploads/2016/10/punterosHeadBueno.png?w=600&ssl=1"/>
        <p id="p1">El texto es: </p>
        <img id="img2" src="http://image.slidesharecdn.com/ppt-informatica-121118101642-phpapp01/95/ppt-informatica-3-638.jpg?cb=1353233854"/>
        <p id="p2">El texto es: </p>        
        <script>
            var imagenReconocer = document.getElementById("img1");
            Tesseract.recognize(imagenReconocer.src, {lang: 'spa'})
                .then(function(result){
                        document.getElementById("p1").innerText += result.text;
                    });     
            var imagenReconocer2 = document.getElementById("img2");
            Tesseract.recognize(imagenReconocer2.src, {lang: 'spa'})
                .then(function(result){
                        document.getElementById("p2").innerText += result.text;
                    });
        </script>
    </body>
</html>

A grandes rasgos, tenemos dos imágenes y dos párrafos donde se va a mostrar el texto que el OCR ha sido capaz de extraer. Una vez que se carge la página se va a ejecutar el código JavaScript, lo primero que se hace es coger la ruta de la imagen a reconocer, luego se le indica el idioma (si es conocido) del texto presente en esa imagen y finalmente se decide que hacer con el resultado del OCR.

La biblioteca de JavaScript es capaz de extraer el texto usando OCR

Como se puede apreciar en la imagen superior, se han extraído correctamente ambas líneas de texto y la posición del salto de línea. Pero también nos muestra otros caracteres que no están presentes en la imagen y que creo que pueden ser debidos a las imágenes.

La biblioteca de JavaScript no es muy precisa al aplicar el OCR

En la segunda fotografía vemos como también es capaz de detectar el texto de la presentación, pero también nos genera algunos caracteres basura.

 

Como resumen, podemos decir que las técnicas de extracción del texto partiendo de una fotografía (OCR), tienen muchos posibles usos, pero que en este caso no son muy precisas.

Espero que os haya parecido interesante este artículo.

Un saludo.

The following two tabs change content below.

Jorge Durán

Entusiasta de la tecnología desde los 10 años, desarrollador y creador de varios proyectos de software y autodidacta por naturaleza. Ingeniero Informático por la USAL

Un comentario en “Extraer el texto de una imagen con JavaScript”

  1. Rodrigo

    Hola
    ¿podrias dar una explicación mas a fondo de como poder utilizarla? llevo semanas intentanto utilizar este OCR y no puedo

    Responder

Deja una Respuesta