El marco Blazor es construido por el equipo de ASP.NET y se utiliza para desarrollar aplicaciones web de UI interactivas utilizando HTML y C# en lugar de JavaScript. Blazor ejecuta código C# directamente en el navegador web usando WebAssembly. Esto facilita la construcción y desarrollo de componentes con lógica y reutilizarlos una y otra vez. Es un marco popular entre los desarrolladores para construir interfaces de usuario en C#.

Para las organizaciones españolas, las aplicaciones Blazor que incorporan OCR ofrecen una vía para digitalizar documentos con alto valor regulatorio directamente en el navegador. Entre los casos de uso más relevantes se encuentran: la verificación de identidad mediante escaneo del DNI o NIE en portales web ciudadanos, la captura de facturas Facturae por clientes empresariales, y la lectura de documentos firmados con PAdES o certificados de la FNMT. La AEPD ha publicado guías específicas sobre el tratamiento de imágenes de documentos de identidad en aplicaciones web: cuando el procesamiento puede realizarse en el lado cliente (Blazor WebAssembly), los datos no llegan al servidor, lo que reduce significativamente el riesgo bajo la LOPDGDD. Las aplicaciones Blazor Server deben, en cambio, aplicar cifrado en tránsito y garantizar que las imágenes de documentos no se persistan más allá del tiempo de sesión. El reglamento eIDAS reconoce la validez de los documentos capturados y procesados electrónicamente cuando el proceso de captura cumple los requisitos de integridad establecidos.

En este artículo, vamos a crear una aplicación Blazor Server para leer texto de archivos de imagen usando Reconocimiento Óptico de Caracteres (OCR) con IronOCR.

¿Cómo leer texto de una imagen usando reconocimiento óptico de caracteres en Blazor?

Prerrequisitos

1. Tener la última versión de Visual Studio. Puedes descargarla desde este enlace.
2. Carga de trabajo de ASP.NET y Desarrollo Web. Mientras instalas Visual Studio, selecciona la carga de trabajo de ASP.NET y Desarrollo Web para la instalación, ya que se requiere para este proyecto.
3. Librería IronOCR en C#. Vamos a usar IronOCR para convertir datos de imagen en texto legible por máquina. Puedes descargar el archivo .DLL del paquete IronOCR directamente desde el sitio web de Iron o descargarlo desde el sitio web de NuGet. Una forma más conveniente de descargar e instalar IronOCR es desde el Administrador de paquetes NuGet en Visual Studio.

Crear una aplicación de servidor Blazor

Abre Visual Studio y sigue los pasos para crear una Aplicación Blazor Server:

1. Haz clic en Crear un Nuevo Proyecto y luego selecciona "Aplicación Blazor Server" de las plantillas de proyectos listadas.

   Crear una nueva Aplicación Blazor Server en Visual Studio

2. A continuación, nombra tu proyecto de manera apropiada. Aquí, lo nombramos BlazorReadText.

   Configurar el proyecto Blazor

3. Finalmente, ajusta la información adicional y haz clic en Crear.

   Seleccionar Framework .NET de Soporte a Largo Plazo e información adicional para el proyecto

La Aplicación Blazor Server ahora está creada. Ahora necesitamos instalar los paquetes necesarios antes de extraer Datos de Imagen usando IronOCR.

Agregar paquetes necesarios

BlazorInputFile

El primer paso es instalar el paquete BlazorInputFile. Es un componente para aplicaciones Blazor y se utiliza para subir archivos individuales o múltiples al servidor. Este componente se usará para subir un archivo de imagen en la página Razor de la aplicación Blazor. Abra "Administrar paquetes NuGet para soluciones" y busque BlazorInputFile.

Instalar el paquete BlazorInputFile

Selecciona la casilla para el proyecto y haz clic en Instalar.

Ahora, abre el archivo _Host.cshtml en la carpeta Pages y añade el siguiente archivo JavaScript:

<script src="_content/BlazorInputFile/inputfile.js"></script>

<script src="_content/BlazorInputFile/inputfile.js"></script>

Navega hasta el archivo _Host.cshtml desde el Explorador de soluciones

Por último, añade el siguiente código en el archivo _Imports.razor.

@using BlazorInputFile

@using BlazorInputFile

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using BlazorInputFile

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using BlazorInputFile

IronOCR

IronOCR es una librería en C# para escanear y leer Imágenes en diferentes formatos. Proporciona la facilidad de trabajar con imágenes en más de 125 idiomas globales.

Para instalar IronOCR, abre el Administrador de Paquetes NuGet y busca IronOCR. Selecciona el proyecto y haz clic en el botón Instalar.

Instalar paquete IronOcr en Administrador de Paquetes NuGet

Añadir el espacio de nombres IronOCR en el archivo _Imports.razor:

@using IronOCR

@using IronOCR

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using IronOCR

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using IronOCR

Crear un componente de interfaz de usuario de Blazor

Un componente representa una interfaz de usuario con lógica de negocio para exhibir un comportamiento dinámico. Blazor utiliza Componentes Razor para crear sus aplicaciones. Estos componentes pueden ser anidados, reutilizados y compartidos entre proyectos. De forma predeterminada, las páginas Counter y FetchData se incluyen en la aplicación; eliminando aquellas para simplicidad.

Haga clic con el botón derecho del ratón en la carpeta "pages" dentro de la aplicación BlazorReadText y, a continuación, seleccione "Agregar" > "Componente Razor". Si no encuentras Componente Razor, haz clic en Nuevo Elemento, y desde los componentes C#, selecciona "Componente Razor". Nombrar el componente "OCR.razor" y haz clic en Agregar.

Agregar nuevo Componente Razor

Una buena práctica es separar el código para esta página razor en otra clase. Nuevamente, haz clic derecho en la carpeta pages y selecciona Agregar > Clase. Nombra la clase igual que el nombre de la página y haz clic en Agregar. Blazor es un marco inteligente y etiqueta esta clase con la página que comparte el mismo nombre.

Crea un archivo de código OCR.razor.cs para el componente Razor OCR.razor

Ahora, pasemos a la implementación del código real que leerá datos de imagen usando IronOCR.

Código fuente del componente de interfaz de usuario Blazor OCR.razor para leer datos de imágenes

Para reconocer texto en una imagen, sube la imagen, convíertela a datos binarios y luego aplica el método IronOCR para extraer texto.

Abre la clase OCR.razor.cs y escribe el siguiente código fuente de ejemplo:

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;
using System.IO;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        // Holds the extracted text from the image
        protected string imageText;
        
        // Holds the base64 string preview of the image
        protected string imagePreview;

        // Byte array to store uploaded image data
        private byte[] imageFileBytes;

        // Default status message for file upload
        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        // Maximum file size allowed (4MB)
        const int MaxFileSize = 4 * 1024 * 1024;

        // Method to handle image preview and size/type validation
        protected async Task ViewImage(IFileListEntry[] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }

            if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes.";
                return;
            }

            if (!file.Type.Contains("image"))
            {
                status = "Please upload a valid image file.";
                return;
            }

            using (var memoryStream = new MemoryStream())
            {
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);
                imagePreview = $"data:image/png;base64,{base64String}";
                status = DefaultStatus;
            }
        }

        // Method to extract text from the uploaded image using IronOCR
        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                using (var ocr = new IronTesseract())
                using (var input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;
using System.IO;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        // Holds the extracted text from the image
        protected string imageText;
        
        // Holds the base64 string preview of the image
        protected string imagePreview;

        // Byte array to store uploaded image data
        private byte[] imageFileBytes;

        // Default status message for file upload
        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        // Maximum file size allowed (4MB)
        const int MaxFileSize = 4 * 1024 * 1024;

        // Method to handle image preview and size/type validation
        protected async Task ViewImage(IFileListEntry[] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }

            if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes.";
                return;
            }

            if (!file.Type.Contains("image"))
            {
                status = "Please upload a valid image file.";
                return;
            }

            using (var memoryStream = new MemoryStream())
            {
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);
                imagePreview = $"data:image/png;base64,{base64String}";
                status = DefaultStatus;
            }
        }

        // Method to extract text from the uploaded image using IronOCR
        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                using (var ocr = new IronTesseract())
                using (var input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

Imports BlazorInputFile
Imports Microsoft.AspNetCore.Components
Imports IronOcr
Imports System.IO
Imports System.Linq
Imports System.Threading.Tasks

Namespace BlazorReadText.Pages

    Public Class OCRModel
        Inherits ComponentBase

        ' Holds the extracted text from the image
        Protected imageText As String

        ' Holds the base64 string preview of the image
        Protected imagePreview As String

        ' Byte array to store uploaded image data
        Private imageFileBytes As Byte()

        ' Default status message for file upload
        Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
        Protected status As String = DefaultStatus

        ' Maximum file size allowed (4MB)
        Const MaxFileSize As Integer = 4 * 1024 * 1024

        ' Method to handle image preview and size/type validation
        Protected Async Function ViewImage(files As IFileListEntry()) As Task
            Dim file = files.FirstOrDefault()
            If file Is Nothing Then
                Return
            End If

            If file.Size > MaxFileSize Then
                status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes."
                Return
            End If

            If Not file.Type.Contains("image") Then
                status = "Please upload a valid image file."
                Return
            End If

            Using memoryStream = New MemoryStream()
                Await file.Data.CopyToAsync(memoryStream)
                imageFileBytes = memoryStream.ToArray()
                Dim base64String As String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length)
                imagePreview = $"data:image/png;base64,{base64String}"
                status = DefaultStatus
            End Using
        End Function

        ' Method to extract text from the uploaded image using IronOCR
        Protected Private Async Function GetText() As Task
            If imageFileBytes IsNot Nothing Then
                Using ocr = New IronTesseract()
                    Using input = New OcrInput(imageFileBytes)
                        Dim result As OcrResult = ocr.Read(input)
                        imageText = result.Text
                    End Using
                End Using
            End If
        End Function
    End Class
End Namespace

Imports BlazorInputFile
Imports Microsoft.AspNetCore.Components
Imports IronOcr
Imports System.IO
Imports System.Linq
Imports System.Threading.Tasks

Namespace BlazorReadText.Pages

    Public Class OCRModel
        Inherits ComponentBase

        ' Holds the extracted text from the image
        Protected imageText As String

        ' Holds the base64 string preview of the image
        Protected imagePreview As String

        ' Byte array to store uploaded image data
        Private imageFileBytes As Byte()

        ' Default status message for file upload
        Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
        Protected status As String = DefaultStatus

        ' Maximum file size allowed (4MB)
        Const MaxFileSize As Integer = 4 * 1024 * 1024

        ' Method to handle image preview and size/type validation
        Protected Async Function ViewImage(files As IFileListEntry()) As Task
            Dim file = files.FirstOrDefault()
            If file Is Nothing Then
                Return
            End If

            If file.Size > MaxFileSize Then
                status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes."
                Return
            End If

            If Not file.Type.Contains("image") Then
                status = "Please upload a valid image file."
                Return
            End If

            Using memoryStream = New MemoryStream()
                Await file.Data.CopyToAsync(memoryStream)
                imageFileBytes = memoryStream.ToArray()
                Dim base64String As String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length)
                imagePreview = $"data:image/png;base64,{base64String}"
                status = DefaultStatus
            End Using
        End Function

        ' Method to extract text from the uploaded image using IronOCR
        Protected Private Async Function GetText() As Task
            If imageFileBytes IsNot Nothing Then
                Using ocr = New IronTesseract()
                    Using input = New OcrInput(imageFileBytes)
                        Dim result As OcrResult = ocr.Read(input)
                        imageText = result.Text
                    End Using
                End Using
            End If
        End Function
    End Class
End Namespace

En el código anterior:

• El método ViewImage se utiliza para gestionar el archivo de imagen cargado. Valida si el archivo es una imagen y comprueba si el tamaño cumple con el límite especificado. Si se produce algún error en el tamaño o el tipo de archivo, se gestiona mediante un bloque if-else. A continuación, la imagen se copia a un MemoryStream y se convierte en una matriz de bytes, ya que IronOcr.OcrInput puede aceptar una imagen en formato binario.
• El método GetText utiliza IronOCR para extraer texto de la imagen de entrada. IronOCR emplea el motor Tesseract 5 y soporta más de 125 idiomas.

El texto extraído se almacena en la variable imageText para su visualización. La biblioteca soporta imágenes de texto en inglés sin configuración adicional. Puedes aprender más sobre cómo usar diferentes idiomas en esta página de ejemplos de código.

Código fuente del componente de interfaz de usuario de Blazor Frontend

A continuación, crea la UI para la aplicación. Abre el archivo OCR.razor y escribe el siguiente código:

@page "/IronOCR"
@inherits OCRModel

<h2>Optical Character Recognition (OCR) Using Blazor and IronOCR Software</h2>

<div class="row">
    <div class="col-md-5">
        <textarea disabled class="form-control" rows="10" cols="15">@imageText</textarea>
    </div>
    <div class="col-md-5">
        <div class="image-container">
            <img class="preview-image" width="800" height="500" src=@imagePreview>
        </div>
        <BlazorInputFile.InputFile OnChange="@ViewImage" />
        <p>@status</p>
        <hr />
        <button class="btn btn-primary btn-lg" @onclick="GetText">
            Extract Text
        </button>
    </div>
</div>

@page "/IronOCR"
@inherits OCRModel

<h2>Optical Character Recognition (OCR) Using Blazor and IronOCR Software</h2>

<div class="row">
    <div class="col-md-5">
        <textarea disabled class="form-control" rows="10" cols="15">@imageText</textarea>
    </div>
    <div class="col-md-5">
        <div class="image-container">
            <img class="preview-image" width="800" height="500" src=@imagePreview>
        </div>
        <BlazorInputFile.InputFile OnChange="@ViewImage" />
        <p>@status</p>
        <hr />
        <button class="btn btn-primary btn-lg" @onclick="GetText">
            Extract Text
        </button>
    </div>
</div>

En el código anterior, la UI incluye:

• Etiqueta de archivo de entrada para elegir un archivo de imagen.
• Una etiqueta de imagen para mostrar la imagen.
• Un botón que activa el método GetText.
• Un área de texto para mostrar el texto extraído de los datos de imagen.

Agregar enlace al menú de navegación

Por último, añade un enlace a la página OCR.razor en el archivo NavMenu.razor dentro de la carpeta Shared:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronOCR">
        <span class="oi oi-plus" aria-hidden="true"></span> Read Image Text
    </NavLink>
</div>

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronOCR">
        <span class="oi oi-plus" aria-hidden="true"></span> Read Image Text
    </NavLink>
</div>

Elimina los enlaces a Counter y FetchData, ya que no son necesarios.

Todo está ahora completado y listo para usar. Presiona F5 para ejecutar la aplicación.

El frontend debería aparecer como se muestra a continuación:

La UI de la Aplicación Blazor Server

Subamos una imagen y extrayamos texto para visualizar el resultado.

Imágenes subidas y textos extraídos

El texto de salida es limpio, y puede ser copiado desde el área de texto.

Consideraciones para aplicaciones Blazor con OCR en España

Al desplegar esta aplicación Blazor en el mercado español, ten en cuenta los siguientes aspectos regulatorios:

DNI y NIE en Blazor WebAssembly: cuando la aplicación está pensada para verificar la identidad de usuarios mediante el escaneo de su DNI (Documento Nacional de Identidad) o NIE (Número de Identidad de Extranjero), el modelo Blazor WebAssembly es preferible desde el punto de vista de la LOPDGDD: el OCR se ejecuta en el navegador del usuario, sin que las imágenes del documento salgan del dispositivo. IronOCR puede empaquetarse para su ejecución en WebAssembly y aplicar el reconocimiento directamente sobre los datos en memoria.

Facturae en Blazor Server: para la captura de facturas Facturae por parte de usuarios empresariales, el modelo Blazor Server es más adecuado dado que las facturas contienen datos fiscales que deben validarse contra el registro de la AEAT. El servidor aplica las reglas de validación tras la extracción por OCR antes de persistir los datos en el sistema contable.

eIDAS y validez de los documentos capturados: los documentos capturados mediante OCR en Blazor deben conservarse con los metadatos de captura (marca temporal, identificador de sesión de usuario autenticado con certificado FNMT) para poder acreditar la integridad del proceso ante terceros o en sede judicial, en cumplimiento del reglamento eIDAS.

AEPD y minimización de datos en formularios web: la AEPD recomienda que los formularios web que solicitan subida de documentos de identidad informen claramente al usuario de la finalidad del tratamiento. El componente Blazor desarrollado en este tutorial puede enriquecerse con un aviso de privacidad LOPDGDD antes del campo de carga de archivo.

Resumen

Este artículo demostró cómo crear un Componente de UI Blazor con código detrás en la Aplicación Blazor Server para leer textos de imágenes. IronOCR es una biblioteca versátil para extraer texto en cualquier aplicación basada en C#. Soporta el último Framework .NET y puede ser utilizado correctamente con aplicaciones Razor. IronOCR es una biblioteca multiplataforma soportada en Windows, Linux, macOS, Docker, Azure, AWS y MAUI. Además, IronOCR ofrece alta precisión utilizando los mejores resultados de Tesseract, sin configuraciones adicionales. Soporta TIFF de frame multipágina, archivos PDF y todos los formatos de imagen populares. También es posible leer valores de códigos de barras desde imágenes.

También puedes probar IronOCR de forma gratuita en una prueba gratuita. Descarga la biblioteca de software desde aquí.