Reconocimiento óptico de caracteres con JavaScript y Tesseract.js

Publicado por parzibyte en

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.


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB.Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron.Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scriptsLa plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C.Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

3 Comments

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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: