Conversión de imagen a texto con React y Tesseract.js (OCR)

 

 

 

  • SmashingConf UX y diseño, Amberes 2024
  • ¡Registro!

  • Índice
    1. ¿Qué es el OCR?
    2. ¿Qué es Tesseract.js?
    3. Comprender las API de Tesseract
    4. ¿Qué vamos a construir?
    5. Instalación de React y Tesseract
    6. Configurar un formulario de carga
    7. Convertir imágenes seleccionadas en textos
    8. Pruebas de precisión
      1. ¿Qué es la binarización?
      2. ¿Qué es la dilatación?
      3. ¿Qué es el desenfoque?
      4. ¿Qué es la inversión?

    ¿Tienes que procesar datos manualmente porque se sirven a través de imágenes o documentos escaneados? Una conversión de imagen a texto permite extraer texto de imágenes para automatizar el procesamiento de textos en imágenes, vídeos y documentos escaneados. En este artículo, veremos cómo convertir una imagen en texto con React y Tesseract.js (OCR), preprocesar imágenes y lidiar con las limitaciones de Tesseract (OCR).

     

    Los datos son la columna vertebral de toda aplicación de software porque el objetivo principal de una aplicación es resolver problemas humanos. Para resolver los problemas humanos es necesario disponer de cierta información sobre ellos.

    Esta información se representa como datos, especialmente mediante computación. En la web, los datos se recopilan principalmente en forma de textos, imágenes, vídeos y muchos más. A veces, las imágenes contienen textos esenciales que deben procesarse para lograr un determinado propósito. Estas imágenes se procesaron en su mayoría manualmente porque no había forma de procesarlas mediante programación.

    La imposibilidad de extraer texto de imágenes fue una limitación del procesamiento de datos que experimenté de primera mano en mi última empresa. Necesitábamos procesar tarjetas de regalo escaneadas y teníamos que hacerlo manualmente ya que no podíamos extraer texto de las imágenes.

    Había un departamento llamado "Operaciones" dentro de la empresa que era responsable de confirmar manualmente las tarjetas de regalo y acreditar las cuentas de los usuarios. Aunque teníamos un sitio web a través del cual los usuarios se conectaban con nosotros, el procesamiento de las tarjetas de regalo se realizaba manualmente entre bastidores.

     

    En ese momento, nuestro sitio web se construyó principalmente con PHP (Laravel) para el backend y JavaScript (jQuery y Vue) para el frontend. Nuestra pila técnica era lo suficientemente buena para trabajar con Tesseract.js siempre que la dirección considerara que el problema era importante.

    Estaba dispuesto a resolver el problema pero no era necesario resolverlo desde el punto de vista de la empresa o de la dirección. Después de dejar la empresa, decidí investigar un poco e intentar encontrar posibles soluciones. Finalmente, descubrí el OCR.

    ¿Qué es el OCR?

    OCR significa "Reconocimiento óptico de caracteres" o "Lector óptico de caracteres". Se utiliza para extraer textos de imágenes.

    La evolución del OCR se remonta a varios inventos, pero Optophone , " Gismo ", el escáner CCD de superficie plana , Newton MesssagePad y Tesseract son los principales inventos que llevan el reconocimiento de caracteres a otro nivel de utilidad.

    Entonces, ¿por qué utilizar OCR? Bueno, el reconocimiento óptico de caracteres resuelve muchos problemas, uno de los cuales me impulsó a escribir este artículo. Me di cuenta de que la capacidad de extraer textos de una imagen garantiza muchas posibilidades, como por ejemplo:

    • Regulación
      Cada organización necesita regular las actividades de los usuarios por algunas razones. El reglamento podría utilizarse para proteger los derechos de los usuarios y protegerlos de amenazas o estafas.
      Extraer textos de una imagen permite a una organización procesar información textual en una imagen para su regulación, especialmente cuando las imágenes son proporcionadas por algunos de los usuarios.
      Por ejemplo, con el OCR se puede regular, como en Facebook, el número de textos en las imágenes utilizadas para los anuncios. Además, OCR también permite ocultar contenido confidencial en Twitter.
    • Capacidad de búsqueda
      La búsqueda es una de las actividades más comunes, especialmente en Internet. Los algoritmos de búsqueda se basan principalmente en la manipulación de textos. Con el reconocimiento óptico de caracteres, es posible reconocer caracteres en imágenes y utilizarlos para proporcionar resultados de imágenes relevantes a los usuarios. En resumen, ahora se pueden buscar imágenes y vídeos con la ayuda de OCR.
    • Accesibilidad
      Tener textos en imágenes siempre ha sido un desafío para la accesibilidad y la regla general es tener pocos textos en una imagen. Con OCR, los lectores de pantalla pueden tener acceso a textos en imágenes para brindar la experiencia necesaria a sus usuarios.
    • Automatización del procesamiento de datos El procesamiento de datos se automatiza principalmente a escala. Tener textos en imágenes es una limitación para el procesamiento de datos porque los textos no se pueden procesar excepto manualmente. El reconocimiento óptico de caracteres (OCR) permite extraer textos en imágenes mediante programación, lo que garantiza la automatización del procesamiento de datos, especialmente cuando tiene que ver con el procesamiento de textos en imágenes.
    • Digitalización de materiales impresos
      Todo se está digitalizando y aún quedan muchos documentos por digitalizar. Ahora se pueden digitalizar cheques, certificados y otros documentos físicos mediante el uso del reconocimiento óptico de caracteres.

    Descubrir todos los usos anteriores profundizó mis intereses, así que decidí ir más allá y hacer una pregunta:

     

    "¿Cómo puedo utilizar OCR en la web, especialmente en una aplicación React?"

    Esa pregunta me llevó a Tesseract.js.

    ¿Qué es Tesseract.js?

    Tesseract.js es una biblioteca de JavaScript que compila el Tesseract original de C a JavaScript WebAssembly, lo que hace que el OCR sea accesible en el navegador. El motor Tesseract.js se escribió originalmente en ASM.js y luego se transfirió a WebAssembly, pero ASM.js todavía sirve como respaldo en algunos casos cuando WebAssembly no es compatible.

    Como se indica en el sitio web de Tesseract.js, admite más de 100 idiomas , orientación automática del texto y detección de secuencias de comandos, una interfaz sencilla para leer párrafos, palabras y cuadros delimitadores de caracteres.

    Tesseract es un motor de reconocimiento óptico de caracteres para varios sistemas operativos. Es software gratuito, publicado bajo la licencia Apache. Hewlett-Packard desarrolló Tesseract como software propietario en los años 1980. Fue lanzado como código abierto en 2005 y su desarrollo ha sido patrocinado por Google desde 2006.

    La última versión, la versión 4, de Tesseract se lanzó en octubre de 2018 y contiene un nuevo motor OCR que utiliza un sistema de red neuronal basado en memoria a corto plazo (LSTM) y está destinado a producir resultados más precisos.

    Comprender las API de Tesseract

    Para comprender realmente cómo funciona Tesseract, debemos desglosar algunas de sus API y sus componentes. Según la documentación de Tesseract.js, hay dos formas de utilizarlo. A continuación se muestra el primer enfoque y su desglose:

    Tesseract.recognize( image,language, { logger: m = console.log(m) }).catch (err = { console.error(err);}).then(result = { console.log(result);})}

    El recognizemétodo toma la imagen como primer argumento, el idioma (que puede ser múltiple) como segundo argumento y { logger: m = console.log(me) }como último argumento. Los formatos de imagen admitidos por Tesseract son jpg, png, bmp y pbm, que solo se pueden suministrar como elementos (img, video o lienzo), objeto de archivo ( input), objeto blob, ruta o URL a una imagen e imagen codificada en base64. ( Lea aquí para obtener más información sobre todos los formatos de imagen que Tesseract puede manejar).

    El idioma se proporciona como una cadena como eng. El +signo podría usarse para concatenar varios idiomas como en eng+chi_tra. El argumento del idioma se utiliza para determinar los datos del idioma entrenado que se utilizarán en el procesamiento de imágenes.

    Nota : Encontrarás todos los idiomas disponibles y sus códigos aquí .

    { logger: m = console.log(m) }Es muy útil para obtener información sobre el progreso de una imagen que se está procesando. La propiedad del registrador toma una función que se llamará varias veces mientras Tesseract procesa una imagen. El parámetro de la función de registrador debe ser un objeto con workerId, jobIdy statuscomo progresspropiedades:

     

    { workerId: ‘worker-200030’, jobId: ‘job-734747’, status: ‘recognizing text’, progress: ‘0.9’ }

    progresses un número entre 0 y 1, y está en porcentaje para mostrar el progreso de un proceso de reconocimiento de imágenes.

    Tesseract genera automáticamente el objeto como parámetro de la función del registrador, pero también se puede suministrar manualmente. A medida que se lleva a cabo un proceso de reconocimiento, las loggerpropiedades del objeto se actualizan cada vez que se llama a la función . Por lo tanto, puede usarse para mostrar una barra de progreso de conversión, modificar alguna parte de una aplicación o usarse para lograr cualquier resultado deseado.

    Lo que resultaparece en el código anterior es el resultado del proceso de reconocimiento de imágenes. Cada una de las propiedades de resulttiene la propiedad bbox como las coordenadas x/y de su cuadro delimitador.

    A continuación se detallan las propiedades del resultobjeto, sus significados o usos:

    { text: "I am codingnninja from Nigeria..." hocr: "div class='ocr_page' id= ..." tsv: "1 1 0 0 0 0 0 0 1486 ..." box: null unlv: null osd: null confidence: 90 blocks: [{...}] psm: "SINGLE_BLOCK" oem: "DEFAULT" version: "4.0.0-825-g887c" paragraphs: [{...}] lines: (5) [{...}, ...] words: (47) [{...}, {...}, ...] symbols: (240) [{...}, {...}, ...]}
    • text: Todo el texto reconocido como una cadena.
    • lines: una matriz de cada línea de texto reconocida.
    • words: una serie de cada palabra reconocida.
    • symbols: Una matriz de cada uno de los caracteres reconocidos.
    • paragraphs: una matriz de cada párrafo reconocido. Hablaremos de la "confianza" más adelante en este artículo.

    Tesseract también se puede utilizar de forma más imperativa como en:

    import { createWorker } from 'tesseract.js'; const worker = createWorker({ logger: m = console.log(m) }); (async () = { await worker.load(); await worker.loadLanguage('eng'); await worker.initialize('eng'); const { data: { text } } = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png'); console.log(text); await worker.terminate();})();

    Este enfoque está relacionado con el primer enfoque pero con diferentes implementaciones.

    createWorker(options)crea un trabajador web o un proceso hijo de nodo que crea un trabajador Tesseract. El trabajador ayuda a configurar el motor Tesseract OCR. El load()método carga los scripts principales de Tesseract, loadLanguage()carga cualquier idioma que se le proporcione como una cadena, initialize()se asegura de que Tesseract esté completamente listo para su uso y luego se utiliza el método de reconocimiento para procesar la imagen proporcionada. El método terminate() detiene al trabajador y limpia todo.

    Nota : consulte la documentación de las API de Tesseract para obtener más información.

     

    Ahora, tenemos que construir algo para ver realmente cuán efectivo es Tesseract.js.

    ¿Qué vamos a construir?

    Vamos a crear un extractor de PIN de tarjetas de regalo porque extraer el PIN de una tarjeta de regalo fue el problema que llevó a esta aventura de escritura en primer lugar.

    Construiremos una aplicación sencilla que extraiga el PIN de una tarjeta de regalo escaneada . Mientras me propuse construir un extractor de pines de tarjeta de regalo simple, lo guiaré a través de algunos de los desafíos que enfrenté a lo largo del proceso, las soluciones que proporcioné y mi conclusión basada en mi experiencia.

    • Ir al código fuente →

    A continuación se muestra la imagen que usaremos para las pruebas porque tiene algunas propiedades realistas que son posibles en el mundo real.

    Extraeremos AQUX-QWMB6L-R6JAU de la tarjeta. Entonces empecemos.

    Instalación de React y Tesseract

    Hay una pregunta que atender antes de instalar React y Tesseract.js y la pregunta es, ¿por qué usar React con Tesseract? Prácticamente, podemos usar Tesseract con Vanilla JavaScript, cualquier biblioteca o marco de JavaScript como React, Vue y Angular.

    Usar React en este caso es una preferencia personal. Inicialmente, quería usar Vue pero decidí usar React porque estoy más familiarizado con React que con Vue.

    Ahora sigamos con las instalaciones.

    Para instalar React con create-react-app, debe ejecutar el siguiente código:

    npx create-react-app image-to-textcd image-to-textyarn add Tesseract.js

    o

    npm install tesseract.js

    Decidí utilizar Yarn para instalar Tesseract.js porque no pude instalar Tesseract con npm, pero Yarn hizo el trabajo sin estrés. Puedes usar npm pero recomiendo instalar Tesseract con hilo a juzgar por mi experiencia.

    Ahora, iniciemos nuestro servidor de desarrollo ejecutando el siguiente código:

    yarn start

    o

    npm start

    Después de ejecutar Yarn Start o npm Start, su navegador predeterminado debería abrir una página web como la siguiente:

    Reaccionar página de inicio. ( Vista previa grande )
    Horoscopos y tarot de amor

    También puede navegar localhost:3000en el navegador siempre que la página no se inicie automáticamente.

    Después de instalar React y Tesseract.js, ¿qué sigue?

    Configurar un formulario de carga

    En este caso, vamos a ajustar la página de inicio (App.js) que acabamos de ver en el navegador para que contenga el formulario que necesitamos:

    import { useState, useRef } from 'react';import Tesseract from 'tesseract.js';import './App.css';function App() { const [imagePath, setImagePath] = useState(""); const [text, setText] = useState(""); const handleChange = (event) = { setImage(URL.createObjectURL(event.target.files[0])); } return ( div className="App" main className="App-main" h3Actual image uploaded/h3 img src={imagePath} className="App-logo" alt="logo"/ h3Extracted text/h3 div className="text-box" p {text} /p /div input type="file" onChange={handleChange} / /main /div );}export default App

    La parte del código anterior que necesita nuestra atención en este punto es la función handleChange.

     

    const handleChange = (event) = { setImage(URL.createObjectURL(event.target.files[0])); }

    En la función, URL.createObjectURLtoma un archivo seleccionado event.target.files[0]y crea una URL de referencia que se puede usar con etiquetas HTML como img, audio y video. Solíamos setImagePathagregar la URL al estado. Ahora, se puede acceder a la URL con imagePath.

    img src={imagePath} className="App-logo" alt="image"/

    Configuramos el atributo src de la imagen para {imagePath}obtener una vista previa de ella en el navegador antes de procesarla.

    Convertir imágenes seleccionadas en textos

    Como hemos tomado la ruta a la imagen seleccionada, podemos pasar la ruta de la imagen a Tesseract.js para extraer textos de ella.

    import { useState} from 'react';import Tesseract from 'tesseract.js';import './App.css'; function App() { const [imagePath, setImagePath] = useState(""); const [text, setText] = useState(""); const handleChange = (event) = { setImagePath(URL.createObjectURL(event.target.files[0])); } const handleClick = () = { Tesseract.recognize( imagePath,'eng', { logger: m = console.log(m) } ) .catch (err = { console.error(err); }) .then(result = { // Get Confidence score let confidence = result.confidence let text = result.text setText(text); }) } return ( div className="App" main className="App-main" h3Actual imagePath uploaded/h3 img src={imagePath} className="App-image" alt="logo"/ h3Extracted text/h3 div className="text-box" p {text} /p /div input type="file" onChange={handleChange} / button onClick={handleClick} style={{height:50}} convert to text/button /main /div );} export default App

    Agregamos la función "handleClick" a "App.js y contiene la API Tesseract.js que toma la ruta a la imagen seleccionada. Tesseract.js toma "imagePath", "idioma", "un objeto de configuración".

    El siguiente botón se agrega al formulario para llamar "handClick", que activa la conversión de imagen a texto cada vez que se hace clic en el botón.

    button onClick={handleClick} style={{height:50}} convert to text/button

    Cuando el procesamiento es exitoso, accedemos tanto a “confianza” como a “texto” del resultado. Luego, agregamos "texto" al estado con "setText(texto)".

    Al agregar a p {text} /p, mostramos el texto extraído.

    Es obvio que el “texto” se extrae de la imagen pero ¿qué es la confianza?

    La confianza muestra cuán precisa es la conversión. El nivel de confianza está entre 1 y 100. 1 representa lo peor, mientras que 100 representa lo mejor en términos de precisión. También se puede utilizar para determinar si un texto extraído debe aceptarse como exacto o no.

     

    Entonces la pregunta es ¿qué factores pueden afectar la puntuación de confianza o la precisión de toda la conversión? Se ve afectado principalmente por tres factores principales: la calidad y naturaleza del documento utilizado, la calidad del escaneo creado a partir del documento y las capacidades de procesamiento del motor Tesseract.

    Ahora, agreguemos el siguiente código a "App.css" para darle un poco de estilo a la aplicación.

    .App { text-align: center;} .App-image { width: 60vmin; pointer-events: none;} .App-main { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(7px + 2vmin); color: white;} .text-box { background: #fff; color: #333; border-radius: 5px; text-align: center;}

    Aquí está el resultado de mi primera prueba :

    Resultado en Firefox

    Resultado de la primera prueba en Firefox. ( Vista previa grande )

    El nivel de confianza del resultado anterior es 64. Vale la pena señalar que la imagen de la tarjeta de regalo es de color oscuro y definitivamente afecta el resultado que obtenemos.

    Si miras más de cerca la imagen de arriba, verás que el pin de la tarjeta es casi exacto en el texto extraído. No es exacto porque la tarjeta de regalo no está muy clara.

    ¡Oh espera! ¿Cómo se verá en Chrome?

    Resultado en Chrome

    Resultado de la primera prueba en Chrome. ( Vista previa grande )

    ¡Ah! El resultado es aún peor en Chrome. Pero, ¿por qué el resultado en Chrome es diferente al de Mozilla Firefox? Cada navegador maneja las imágenes y sus perfiles de color de manera diferente. Eso significa que una imagen se puede representar de manera diferente según el navegador . Al proporcionar un renderizado previo image.dataa Tesseract, es probable que se produzca un resultado diferente en diferentes navegadores porque image.datase proporciona diferente a Tesseract dependiendo del navegador en uso. El preprocesamiento de una imagen, como veremos más adelante en este artículo, ayudará a lograr un resultado consistente.

    Necesitamos ser más precisos para estar seguros de que estamos obteniendo o brindando la información correcta. Así que tenemos que ir un poco más allá.

    Intentemos más para ver si al final podemos lograr el objetivo.

    Pruebas de precisión

    Hay muchos factores que afectan la conversión de imagen a texto con Tesseract.js . La mayoría de estos factores giran en torno a la naturaleza de la imagen que queremos procesar y el resto depende de cómo el motor Tesseract maneja la conversión.

    Internamente, Tesseract preprocesa las imágenes antes de la conversión OCR real, pero no siempre proporciona resultados precisos.

    Como solución, podemos preprocesar imágenes para lograr conversiones precisas. Podemos binarizar, invertir, dilatar, alinear o reescalar una imagen para preprocesarla para Tesseract.js .

    El preprocesamiento de imágenes supone mucho trabajo o un campo extenso por sí solo. Afortunadamente, P5.js ha proporcionado todas las técnicas de preprocesamiento de imágenes que queremos utilizar. En lugar de reinventar la rueda o usar toda la biblioteca solo porque queremos usar una pequeña parte, he copiado las que necesitamos. Todas las técnicas de preprocesamiento de imágenes están incluidas en preprocess.js .

     

    ¿Qué es la binarización?

    La binarización es la conversión de los píxeles de una imagen a blanco o negro. Queremos binarizar la tarjeta de regalo anterior para comprobar si la precisión será mejor o no.

    Anteriormente, extrajimos algunos textos de una tarjeta de regalo, pero el PIN de destino no era tan preciso como queríamos. Por tanto, es necesario encontrar otra forma de obtener un resultado preciso.

    Ahora queremos binarizar la tarjeta de regalo , es decir, queremos convertir sus píxeles a blanco y negro para poder ver si se puede lograr un mejor nivel de precisión o no.

    Las siguientes funciones se utilizarán para la binarización y se incluyen en un archivo separado llamado preprocess.js .

    function preprocessImage(canvas) { const ctx = canvas.getContext('2d'); const image = ctx.getImageData(0,0,canvas.width, canvas.height); thresholdFilter(image.data, 0.5); return image; } Export default preprocessImage

    ¿Qué hace el código anterior?

    Introducimos el lienzo para contener los datos de una imagen para aplicar algunos filtros y preprocesar la imagen antes de pasarla a Tesseract para su conversión.

    La primera preprocessImagefunción se encuentra en preprocess.js y prepara el lienzo para su uso obteniendo sus píxeles. La función thresholdFilterbinariza la imagen convirtiendo sus píxeles a blanco o negro .

    Llamemos preprocessImagepara ver si el texto extraído de la tarjeta regalo anterior puede ser más exacto.

    Para cuando actualicemos App.js, debería verse así:

    import { useState, useRef } from 'react';import preprocessImage from './preprocess';import Tesseract from 'tesseract.js';import './App.css'; function App() { const [image, setImage] = useState(""); const [text, setText] = useState(""); const canvasRef = useRef(null); const imageRef = useRef(null); const handleChange = (event) = { setImage(URL.createObjectURL(event.target.files[0])) } const handleClick = () = { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); ctx.drawImage(imageRef.current, 0, 0); ctx.putImageData(preprocessImage(canvas),0,0); const dataUrl = canvas.toDataURL("image/jpeg"); Tesseract.recognize( dataUrl,'eng', { logger: m = console.log(m) } ) .catch (err = { console.error(err); }) .then(result = { // Get Confidence score let confidence = result.confidence console.log(confidence) // Get full output let text = result.text setText(text); }) } return ( div className="App" main className="App-main" h3Actual image uploaded/h3 img src={image} className="App-logo" alt="logo" ref={imageRef} / h3Canvas/h3 canvas ref={canvasRef} width={700} height={250}/canvas h3Extracted text/h3 div className="pin-box" p {text} /p /div input type="file" onChange={handleChange} / button onClick={handleClick} style={{height:50}}Convert to text/button /main /div );} export default App

    Primero, tenemos que importar "preprocessImage" desde "preprocess.js" con el siguiente código:

     

    import preprocessImage from './preprocess';

    Luego, agregamos una etiqueta de lienzo al formulario. Establecemos el atributo ref de las etiquetas canvas e img en { canvasRef }y { imageRef }respectivamente. Las referencias se utilizan para acceder al lienzo y a la imagen desde el componente de la aplicación. Nos hacemos con tanto el lienzo como la imagen con “useRef” como en:

    const canvasRef = useRef(null);const imageRef = useRef(null);

    En esta parte del código, fusionamos la imagen con el lienzo, ya que solo podemos preprocesar un lienzo en JavaScript. Luego lo convertimos a una URL de datos con “jpeg” como formato de imagen.

    const canvas = canvasRef.current;const ctx = canvas.getContext('2d'); ctx.drawImage(imageRef.current, 0, 0);ctx.putImageData(preprocessImage(canvas),0,0);const dataUrl = canvas.toDataURL("image/jpeg");

    "dataUrl" se pasa a Tesseract como la imagen a procesar.

    Ahora, comprobemos si el texto extraído será más preciso.

    Prueba #2

    Resultado de la segunda prueba en Firefox. ( Vista previa grande )

    La imagen de arriba muestra el resultado en Firefox. Es obvio que la parte oscura de la imagen se ha cambiado a blanca, pero el preprocesamiento de la imagen no conduce a un resultado más preciso. Es aún peor.

    La primera conversión sólo tiene dos caracteres incorrectos pero ésta tiene cuatro caracteres incorrectos. Incluso intenté cambiar el nivel del umbral pero fue en vano. No obtenemos un mejor resultado no porque la binarización sea mala sino porque binarizar la imagen no corrige la naturaleza de la imagen de una manera que sea adecuada para el motor Tesseract.

    Veamos cómo se ve también en Chrome:

    Resultado de la segunda prueba en Chrome. ( Vista previa grande )

    Obtenemos el mismo resultado.

    Después de obtener un peor resultado al binarizar la imagen, es necesario comprobar otras técnicas de preprocesamiento de imágenes para ver si podemos resolver el problema o no. Entonces, a continuación vamos a probar la dilatación, la inversión y el desenfoque.

    Obtengamos el código para cada una de las técnicas de P5.js tal como se utiliza en este artículo . Agregaremos las técnicas de procesamiento de imágenes a preprocess.js y las usaremos una por una. Es necesario comprender cada una de las técnicas de preprocesamiento de imágenes que queremos utilizar antes de utilizarlas, por lo que vamos a comentarlas primero.

    ¿Qué es la dilatación?

    La dilatación consiste en agregar píxeles a los límites de los objetos de una imagen para hacerla más ancha, más grande o más abierta. La técnica de "dilatar" se utiliza para preprocesar nuestras imágenes para aumentar el brillo de los objetos en las imágenes. Necesitamos una función para dilatar imágenes usando JavaScript, por lo que el fragmento de código para dilatar una imagen se agrega a preprocess.js .

    ¿Qué es el desenfoque?

    Desenfocar es suavizar los colores de una imagen reduciendo su nitidez. A veces, las imágenes tienen pequeños puntos/parches. Para eliminar esos parches, podemos difuminar las imágenes. El fragmento de código para desenfocar una imagen se incluye en preprocess.js .

    ¿Qué es la inversión?

    La inversión consiste en cambiar las áreas claras de una imagen a un color oscuro y las áreas oscuras a un color claro. Por ejemplo, si una imagen tiene fondo negro y primer plano blanco, podemos invertirla para que su fondo sea blanco y su primer plano negro. También agregamos el fragmento de código para invertir una imagen en preprocess.js .

    Después de agregar dilatey invertColorsa blurARGB"preprocess.js", ahora podemos usarlos para preprocesar imágenes. Para usarlos, necesitamos actualizar la función inicial "preprocessImage" en preprocess.js :

    preprocessImage(...)ahora se ve así:

    function preprocessImage(canvas) { const level = 0.4; const radius = 1; const ctx = canvas.getContext('2d'); const image = ctx.getImageData(0,0,canvas.width, canvas.height); blurARGB(image.data, canvas, radius); dilate(image.data, canvas); invertColors(image.data); thresholdFilter(image.data, level); return image; }

    Arriba preprocessImage, aplicamos cuatro técnicas de preprocesamiento a una imagen: blurARGB()eliminar los puntos






    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Conversión de imagen a texto con React y Tesseract.js (OCR)

    Conversión de imagen a texto con React y Tesseract.js (OCR)

    SmashingConf UX y diseño, Amberes 2024 ¡Registro! Índice ¿Qué es el OCR?

    programar

    es

    https://pseint.es/static/images/programar-conversion-de-imagen-a-texto-con-react-y-tesseract-1106-0.jpg

    2024-04-04

     

    Conversión de imagen a texto con React y Tesseract.js (OCR)
    Conversión de imagen a texto con React y Tesseract.js (OCR)

     

     

    Top 20