Lenguaje JavaScript

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.

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.

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
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

Share
Publicado por
Jorge Durán

Recent Posts

[Remix] Multitud de recursos para .NET

En los últimos tiempos no he podido escribir con toda la frecuencia que me gustaría,…

3 años hace

¿Qué es un puntero y cómo se usan?

Uno de los problemas más comunes a los que se enfrentan los usuarios que empiezan…

3 años hace

Los 10 mejores paquetes nuget que tienes que instalar

Cuando empiezas un proyecto hay una serie de aspectos comunes que suelen ser resueltos mediante…

4 años hace

Haz los mejores layouts y patrones CSS fácilmente

Si alguna vez has tenido que realizar un desarrollo de front-end seguramente te habrás dado…

4 años hace

10 lugares con retos y competiciones de programación

Una vez que una persona ya ha aprendido lo básico sobre un lenguaje de programación,…

5 años hace

¿Cómo elegir un buen hosting para tu proyecto?

Hoy en día, un gran porcentaje de los proyectos que se desarrollan son páginas webs.…

5 años hace