Funciones de la app
Texto impreso desde la cámara
En un flujo típico de escaneo de documentos con Expo, la vista previa te orienta sobre dónde está el texto impreso, y al capturar se hace una lectura más fiable que puede enviar el texto a otra pantalla o función de tu app. Se mantiene a nivel general para que puedas contrastarlo con tu implementación.
Referencia en un solo archivo (descarga)
Más abajo puedes descargar un archivo didáctico que concentra todo en un componente: ayudas OCR, preparación de imagen para el paso final, mapeo de cajas sobre la vista previa, el bucle en vivo con temporizador y el disparo que encadena lo que hagas después con el texto. Sigue el patrón habitual de partir este flujo en varios módulos; no es una ruta lista para pegar. Tras descargarlo, reconecta imports (`ScreenHeader`, `ROUTES`, tema y helpers de persistencia o navegación) y añade las claves de traducción `scan.*` / `a11y.*` que use la UI, o cámbialas por tus propias cadenas.
Paquetes: `expo-camera`, `expo-text-extractor`, `expo-image-manipulator`, `expo-file-system`, `expo-router`, `react-i18next` y tu proveedor de área segura. El ejemplo usa `navigate` desde una ruta interna de Expo Router; en proyectos nuevos conviene usar la API de navegación soportada por tu SDK.
Capturas de demostración
De una app de referencia Expo con OCR en el dispositivo (`expo-text-extractor` y `expo-camera`).
Qué ve la persona
La cámara ocupa la pantalla. De vez en cuando la app guarda una foto rápida y ligera solo para situar bloques de texto. Esas zonas se marcan con esquinas sencillas en la vista previa, para indicar que el sistema “ve” la página. Esa pasada sirve de guía, no pretende ser perfecta. Cuando quieres, una captura definitiva hace una lectura más completa; el texto extraído puede abrirse en la siguiente pantalla ya rellenado.
Cómo suele montarse el flujo
- La vista previa conoce su ancho y alto en pantalla para poder escalar y colocar las cajas de texto como las ves.
- Con un temporizador regular, la app guarda una foto pequeña y comprimida, ejecuta detección de texto en el dispositivo, proyecta los recuadros sobre la vista previa y borra el archivo temporal para no llenar el almacenamiento.
- Al capturar de verdad, la app guarda una foto de mayor calidad, a veces reduce tamaños muy grandes para que el reconocimiento siga siendo ágil, extrae el texto completo, guarda el resultado para la siguiente pantalla y navega allí.
Dónde se procesa
En un Expo típico con extracción nativa, el reconocimiento suele hacerse en el teléfono o tablet. Este esquema no exige enviar la vista previa en vivo a un servidor; revisa tus módulos y tu política de privacidad para confirmar cómo se comporta tu compilación.
Casos a tener en cuenta
- En el navegador, el OCR con cámara a menudo no está disponible o es limitado. Tiene sentido mostrar un mensaje claro y permitir volver atrás en lugar de fingir que la función existe.
- Algunos dispositivos o compilaciones no ofrecen el extractor nativo. Un estado breve del tipo «no disponible aquí» es preferible a un fallo silencioso.
- Si tras capturar no hay texto, la app puede explicarlo con lenguaje sencillo en lugar de dejar la pantalla en blanco.
Cómo está organizado el archivo descargado
Léelo de arriba abajo: primero utilidades compartidas, luego la pantalla. Los errores usan códigos en cadena `OCR_WEB`, `OCR_UNSUPPORTED` y `OCR_EMPTY` para mostrar alertas traducidas.
Extracción de texto (texto completo frente a bloques)
`extractPrintedTextFromImageUri` comprueba web y `isSupported`, llama a `extractTextFromImage`, une segmentos recortados con saltos de línea y lanza `OCR_EMPTY` si no queda texto. `extractPrintedTextBlocksFromImageUri` solo devuelve bloques (`extractTextBlocksFromImage`) para los rectángulos en vivo, no para el texto final.
`prepareImageForOcr`
Si ancho o alto superan 1600 px en el lado mayor, la imagen se escala para que ese lado sea 1600 px y se guarda como JPEG con compresión 0.82. Así se acota memoria y trabajo del OCR final sin tocar la lógica de la vista previa en vivo.
`mapTextBlocksToPreview` (cover)
La vista es un rectángulo fijo: la función escala la foto con `Math.max` para cubrir la vista, la centra con desplazamientos, multiplica coordenadas normalizadas (`x`, `y`, `width`, `height`) por el tamaño mostrado y limita los recuadros a `maxBoxes` (28).
`ScanTextRegionHighlight`
Cada región tiene un relleno suave, cuatro esquinas en L dimensionadas según el rectángulo y un borde interior tenue con `accentToRgba` para seguir el color de acento del tema sin tapar la cámara.
Intervalo en vivo y limpieza
Cuando la cámara está lista, hay permiso, se conoce el layout y no corre el OCR final (`busy` en falso), un temporizador dispara unas cada 820 ms: foto de baja calidad (`quality` 0.22), extracción de bloques, mapeo a `highlights` y borrado de la URI con `FileSystem.deleteAsync`. `liveBusyRef` evita solapar dos capturas vivas.
Botón de captura y OCR completo
`onCapture` toma una foto de mayor calidad (`quality` 0.78), pasa dimensiones a `prepareImageForOcr` y luego `extractPrintedTextFromImageUri`. El callback posterior recorta y normaliza espacios, exige una longitud mínima, guarda el texto para la siguiente pantalla y navega con tu propia ruta. En web se muestra cabecera mínima y avisos al entrar para poder volver.
Si lo estás implementando
Los nombres cambian según el proyecto; suele haber pantalla de cámara, utilidades para cadenas OCR y cajas delimitadoras, un paso para redimensionar la imagen antes del reconocimiento final, mapeo de coordenadas normalizadas a píxeles de la vista previa, y un pequeño caché o almacén para que la siguiente pantalla reciba el texto extraído. La extracción nativa suele ir en un módulo Expo de esta familia.
Usa esta página como mapa conceptual. Ajusta rutas y constantes a tu repositorio y a los requisitos del producto.