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.
Jorge Durán
Latest posts by Jorge Durán (see all)
- [Remix] Multitud de recursos para .NET - 18 junio, 2021
- ¿Qué es un puntero y cómo se usan? - 4 junio, 2021
- Los 10 mejores paquetes nuget que tienes que instalar - 26 abril, 2021
Un comentario en “Extraer el texto de una imagen con JavaScript”
Rodrigo
Hola
¿podrias dar una explicación mas a fondo de como poder utilizarla? llevo semanas intentanto utilizar este OCR y no puedo