Ya estamos en otro post sobre el reconocimiento óptico de caracteres, que no es otra cosa más que detectar el texto que existe dentro de una imagen, es decir, extraer el texto de una imagen.

Ejemplo de funcionamiento de tesseract.js : extraer texto de una imagen

Lo hicimos con Tesseract OCR en Windows y Linux, pero ahora lo haremos en un lenguaje de programación que se ejecuta en el navegador: JavaScript.

Sí, estás leyendo bien, vamos a extraer el texto de una imagen con JavaScript, usando Tesseract OCR, el cual es un motor de reconocimiento óptico de caracteres.

Tesseract.js

La librería Tesseract JS extrae palabras de casi cualquier idioma a partir de imágenes, es decir, extrae el texto de una imagen.

tesseract.js puede ejecutarse directamente en el navegador, ya que es propiamente un archivo de JavaScript.

Extraer texto de una imagen con JavaScript

Internamente es un ajuste del motor Tesseract OCR traído a JavaScript gracias a emscripten.

Por cierto, tesseract.js utiliza Web Workers.

¿Quieres usar esto de manera nativa en Windows o Linux, o quieres ver una demostración? click aquí.

Uso de tesseract.js en el navegador

Podemos importar la librería con un script, o descargar el archivo, pues al final es un fichero con extension .js.

Gracias a unpkg podemos importar el script de un rápido CDN, en mi caso es:

https://unpkg.com/tesseract.js@2.0.0-alpha.7/dist/tesseract.min.js

Estoy usando el último release publicado en GitHub, si cuando consultas este post eso cambia, simplemente actualiza lo que va después del arroba.

Tesseract y TesseractWorker

Al importar el script podremos invocar a un WebWorker de Tesseract creando un nuevo objeto de tipo  Tesseract.TesseractWorker y llamando al método recognize dentro del mismo, el cual regresa un TesseractJob (algo parecido a una promesa) y acepta los siguientes argumentos:

  1. La imagen de la cual vamos a extraer el texto
  2. El idioma o idiomas. Para el español es spa, y si quisiéramos el español como el inglés entonces sería spa+eng, es decir, separándolos con el signo de más (+).
  3. Un objeto de opciones de Tesseract

Ese TesseractJob tendrá sus métodos then, catch, finally y uno muy interesante: el progress.

Veamos un ejemplo:

La imagen

La imagen puede venir de:

  • Un elemento HTML de tipo img, canvas o video
  • Un objeto de tipo File, obtenido de un input file
  • Una ruta de una imagen accesible desde el navegador

Así que podemos indicar simplemente la URL de una imagen o pasarle la imagen obtenida de un input

Pistas para obtener la imagen

Como lo dije, podemos indicar la imagen como una ruta; u obtenerla de un input.

Definimos un input:

<input type="file" id="mi_input">

Obtenemos una referencia al elemento:

const $mi_input = document.querySelector("#mi_input");

Ahora los archivos estarán en $mi_input.files

Para reconocer la imagen (en el click de un botón o en el change del input) le pasamos al worker lo que haya en $mi_input.files[0], es decir, el primer archivo del input.

El progreso

El worker invocará a progress en cada avance que haga, porque el proceso puede tardar dependiendo del poder de la computadora.

En cada invocación a progress el valor traerá dos datos útiles: status y progress

  • status: el estado, una leyenda de lo que está haciendo (por ejemplo, detectando el texto)
  • progress: un valor flotante que indica el porcentaje

Podemos escuchar estos avances y mostrarlos en un párrafo o en barras de carga, todo queda en nuestra creatividad, tiempo y requisitos, en caso de que existan.

El resultado

Cuando la promesa se resuelva (en el then) traerá el resultado, el cual es un objeto que tiene los datos del texto extraído de la imagen, es lo que tanto esperamos, es en donde la magia sucede.

Dicho objeto tiene muchos datos, pero la propiedad en donde está el texto se llama text.

Conclusión

En conclusión debes importar el archivo, crear un worker de Tesseract.TesseractWorker, llamar al método recognize y manejar el progress, then, catch y finally,

Una cosa muy importante es manejar el catch, pues si hay errores los mismos serán reportados ahí.

Muy pronto traeré una aplicación de ejemplo para que veas el uso en vivo.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 6,836 suscriptores

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

7 Comentarios

Juan Luis Hernández · noviembre 19, 2019 a las 10:59 am

Hola, soy muy nuevo en esto y he seguido todos los pasos que has indicado con el Tesseract OCR para leer una imagen y extraer su texto, pero … me quedo clavado en ejecutar el código que pones al final, sobre el .js y el WORKER. ¿Podrías ayudarme?. Otra cosa, ¿Se puede extraer sólo el texto deseado?, es decir, al leer una imagen sólo quiero un texto en concreto, realizando modificaciones en el script que lee el documento?. Muchas gracias por todo y por tu aporte.

    parzibyte · noviembre 19, 2019 a las 10:14 pm

    Hola. Para que el script solo lea determinada parte puedes cortar el texto obtenido, es decir, obtener los primeros N caracteres, o recortar la imagen para que solo se lea el mensaje que quieres.
    Sobre tu otra duda; es muy general, ¿podrías ser más específico?
    Un saludo

jasiel · julio 18, 2019 a las 2:02 pm

Hola una pregunta en caso de querer guardar la imagen en un servidor como lo puedo hacer … agradeceria tu ayuda

Extraer el texto de una imagen con JavaScript y Tesseract.js - Aplicación web - Parzibyte's blog · mayo 28, 2019 a las 9:26 pm

[…] algún tiempo presenté el uso de la librería de JavaScript llamada Tesseract.Js, la cual sirve para extraer el texto de una imagen o convertir una imagen a […]

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: