The Digital Mike

Para crear un extractor de imagen a texto usando JavaScript sin depender de API externas, vamos a usar la biblioteca Tesseract.js, que es un puerto de JavaScript del motor Tesseract OCR. Esto nos va a permitir realizar el reconocimiento óptico de caracteres directamente en el navegador o en un entorno Node.js. Para este tutorial sobre extraer texto de imagen, lo haremos usando javascript en vez de Node.js.

Crear la base con el input para subir la imagen

Nuestra base para la aplicacion sera bastante simple. Vamos a crear un titulo para la aplicacion, y luego dos contenedores; uno con el input para subir y/o seleccionar la imagen para extraer el texto, y otro con opciones para poder descargar el texto extraido usando variedad de extensiones de texto segun el interes de usuario.

Ademas de estos, vamos a crear un contenedor en el que presentaremos el resultado de la extraccion. En este caso el texto extraido de la imagen.

Para poder acceder al contenido HTML desde JavaScript vamos a estar usando id en cada contenedor, input, y botones. Para este tutorial vamos a permitir la descarga en tres formatos: documentos simple .txt, documento word .doc, y documento .pdf.

<h1>Image to Text Extractor</h1>
    <div id="dwlop">
        <div>
            <fieldset>
                <legend>Select image upload</legend>
                <div>
                    <label><input type="radio" id="upload" name="imginput" value="upload" checked /> Upload</label>
                </div>
              <div>
                    <input type="file" id="imageUpload" accept="image
        uploadOpt.forEach((el) => {
            el.onchange = function(ev){
                const value = ev.target.value;
                addImage.style.display = (value === 'upload') ? 'block' : 'none';

            };
        });
document.querySelector('input[name="imginput"]:checked').dispatchEvent(new Event('change'));

4. Como agregar Tesseract y usarlo como una funcion reutilizable

Lo siguiente sera la funcion que se hara cargo de procesar la imagen usando Tesseract. Esta funcion tiene como ventaja que podras reutilizarla en cualquier lugar que desees. La funcion tomara dos variables, la primera ‘imgSrc‘ guardara la informacion de la imagen, ‘output‘ permite visualizar el resultado en un contenedor. La opcion sobre console… sirve para saber en consola al comportamiento de la funcion m iestras se ejecuta. Si deseas, puedes eliminar tanto la parte ‘{ logger: m => console.log(m) }‘ y ‘console.error(err)‘ de la funcion, pero solo cuando ya este listo para mover el codigo hacia el servidor de produccion.

        function processImage(imgSrc, output){
            Tesseract.recognize(
                imgSrc,
                'eng',
                {
                    logger: m => console.log(m)
                }
            ).then(({data: {text}}) =>{
                output.innerText = text;
            }).catch(err => {
                console.error(err);
                output.innerText = 'Error Processing image. Try again.';
            });
        }

5. Como usar el evento ‘change’ para ejecutar una funcion al subir una imagen.

Ahora vamos a agregar la accion al input donde subiremos la imagen para que, una vez subida, la funcion anterior genere el texto y lo presente debajo del formulario.

        addImage.addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function() {
                    processImage(reader.result, outputTXT); 
                    downloadBtn.removeAttribute('disabled'); 
                };
                reader.readAsDataURL(file);
            }
                        
        });

6. Como crear una funcion que utilice con ‘switch’ para acceder a las opciones de descarga

Continuando con el codigo, vamos a generar la funcion que permitira copiar el texto a un fichero. En esta fase la funcion usara la opcion que elijamos de la seleccion y generara el fichero con la extension pertinente.

function copyAsTxt(innerContent, fort){
            const content = document.getElementById(innerContent).innerText;
            let blob, fileName;
            
            switch (fort){
                case 'txt': 
                    blob = new Blob([content], {type: 'text/plain'});
                    fileName = 'content.txt';
                    break;
                case 'doc': 
                    blob = new Blob([content], {type: 'application/msword'});
                    fileName = 'content.doc';
                    break;
                case 'pdf': 
                    pdfFile(content); 
                    break;
                default: 
                    blob = new Blob([content], {type: 'text/plain'});
                    fileName = 'content.txt';
            }
            
            
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

downloadBtn.onclick = function(){
            const formate = document.getElementById('format').value
            copyAsTxt('output', formate);
        };

function pdfFile(content){
            const { jsPDF } = window.jspdf;
            const doc = new jsPDF();
            doc.text(content, 10, 10);
            doc.save('content.pdf');
        }