Cómo leer texto de una imagen en Blazor

Blazor es un framework creado por el equipo de ASP.NET que se utiliza para desarrollar aplicaciones web de interfaz de usuario interactiva utilizando HTML y C# en lugar de JavaScript. Blazor ejecuta código C# directamente en el navegador web mediante WebAssembly. Esto facilita la construcción y el desarrollo de componentes con lógica y su reutilización una y otra vez. Se trata de un marco de trabajo muy popular entre los desarrolladores para crear interfaces de usuario en C#.

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

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

Requisitos previos

1. Disponer de la última versión de Visual Studio. Puedes descargarlo desde este enlace.

2. ASP.NET y carga de trabajo en desarrollo web. Al instalar Visual Studio, seleccione ASP.NET y la carga de trabajo de desarrollo web para la instalación, ya que es necesario para este proyecto.

3. Biblioteca de IronOCR C#. Vamos a utilizar IronOCR para convertir datos de imagen en texto legible por máquina. Puede 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 cómoda de descargar e instalar IronOCR es desde el gestor de paquetes NuGet de Visual Studio.

Crear una aplicación de servidor Blazor

Abra Visual Studio y siga los pasos para crear una Blazor Server App:

1. Haz clic en Crear un nuevo proyecto y luego selecciona "Blazor Server App" de las plantillas de proyecto enumeradas.

   

   Crea una nueva aplicación de servidor Blazor en Visual Studio

2. A continuación, asigne un nombre apropiado a su proyecto. Aquí, lo estamos nombrando "BlazorReadText".

   

   Configurar el proyecto Blazor

3. Por último, establezca la información adicional y haga clic en Crear.

   

   Seleccionar el .NET Framework de soporte a largo plazo y información adicional para el proyecto

   La aplicación Blazor Server ya está creada. Ahora tenemos que instalar los paquetes necesarios antes de extraer los datos de imagen utilizando IronOCR.

Añadir los paquetes necesarios

BlazorInputFile

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

Instalar el paquete BlazorInputFile

Seleccione la casilla correspondiente al proyecto y haga 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>

Navegue al archivo _Host.cshtml desde el Explorador de Soluciones

Finalmente, agrega 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

IronOCR

IronOCR es una librería C# para escanear y leer Imágenes en diferentes formatos. Permite trabajar con imágenes en más de 127 idiomas.

Para instalar IronOCR, abra el gestor de paquetes NuGet y busque IronOCR. Seleccione el proyecto y haga clic en el botón Instalar.

Instalar el paquete IronOCR en el Administrador de paquetes NuGet

Agregue el espacio de nombres de IronOCR en el archivo _Imports.razor:

@using IronOCR

@using IronOCR

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

Crear un componente de interfaz de usuario Blazor

Un componente representa una interfaz de usuario con lógica de negocio para mostrar un comportamiento dinámico. Blazor utiliza Razor Components para construir sus aplicaciones. Estos componentes pueden anidarse, reutilizarse y compartirse entre proyectos. De forma predeterminada, las páginas Counter y FetchData se proporcionan en la aplicación, eliminando esas para simplificar.

Haz clic derecho en la carpeta pages bajo la aplicación BlazorReadText, y luego selecciona Add > Razor Component. Si no encuentras Razor Component, haz clic en Nuevo elemento y, en los componentes de C#, selecciona "Razor Component". Nombre el componente "OCR.razor" y haga clic en Añadir.

Agregar nuevo componente Razor

Una mejor práctica es separar el código para esta página de la maquinilla de afeitar como en otra clase. Nuevamente, haga clic derecho en la carpeta de páginas y seleccione Añadir > Clase. Asigne a la clase el mismo nombre que a la página y haga clic en Añadir. Blazor es un framework inteligente, y etiqueta esta clase con la página que comparte el mismo nombre.

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

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

Blazor OCR.razor UI Componente Código fuente para leer datos de imagen

Para reconocer texto en una imagen, cargue la imagen, conviértala en datos binarios y, a continuación, aplique el método IronOCR para extraer el texto.

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

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        protected string imageText;
        protected string imagePreview;
        byte [] imageFileBytes;

        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        const int MaxFileSize = 4 * 1024 * 1024; // 4MB

        protected async Task ViewImage(IFileListEntry [] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }
            else if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, this is more than the allowed limit of {MaxFileSize} bytes.";
                return;
            }
            else if (!file.Type.Contains("image"))
            {
                status = "Please uplaod a valid image file";
                return;
            }
            else
            {
                var memoryStream = new MemoryStream();
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);

                imagePreview = string.Concat("data:image/png;base64,", base64String);
                memoryStream.Flush();
                status = DefaultStatus;
            }
        }

        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                IronTesseract ocr = new IronTesseract();
                using (OcrInput input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        protected string imageText;
        protected string imagePreview;
        byte [] imageFileBytes;

        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        const int MaxFileSize = 4 * 1024 * 1024; // 4MB

        protected async Task ViewImage(IFileListEntry [] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }
            else if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, this is more than the allowed limit of {MaxFileSize} bytes.";
                return;
            }
            else if (!file.Type.Contains("image"))
            {
                status = "Please uplaod a valid image file";
                return;
            }
            else
            {
                var memoryStream = new MemoryStream();
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);

                imagePreview = string.Concat("data:image/png;base64,", base64String);
                memoryStream.Flush();
                status = DefaultStatus;
            }
        }

        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                IronTesseract ocr = new IronTesseract();
                using (OcrInput input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

Imports BlazorInputFile
Imports Microsoft.AspNetCore.Components
Imports IronOcr

Namespace BlazorReadText.Pages
	Public Class OCRModel
		Inherits ComponentBase

		Protected imageText As String
		Protected imagePreview As String
		Private imageFileBytes() As Byte

		Private Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
		Protected status As String = DefaultStatus

		Private Const MaxFileSize As Integer = 4 * 1024 * 1024 ' 4MB

		Protected Async Function ViewImage(ByVal files() As IFileListEntry) As Task
			Dim file = files.FirstOrDefault()
			If file Is Nothing Then
				Return
			ElseIf file.Size > MaxFileSize Then
				status = $"The file size is {file.Size} bytes, this is more than the allowed limit of {MaxFileSize} bytes."
				Return
			ElseIf Not file.Type.Contains("image") Then
				status = "Please uplaod a valid image file"
				Return
			Else
				Dim memoryStream As New MemoryStream()
				Await file.Data.CopyToAsync(memoryStream)
				imageFileBytes = memoryStream.ToArray()
				Dim base64String As String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length)

				imagePreview = String.Concat("data:image/png;base64,", base64String)
				memoryStream.Flush()
				status = DefaultStatus
			End If
		End Function

		Private Protected Async Function GetText() As Task
			If imageFileBytes IsNot Nothing Then
				Dim ocr As New IronTesseract()
				Using input As New OcrInput(imageFileBytes)
					Dim result As OcrResult = ocr.Read(input)
					imageText = result.Text
				End Using
			End If
		End Function
	End Class
End Namespace

En el código anterior, el método ViewImage se utiliza para tomar el archivo cargado del archivo de entrada y verificar si es una imagen y si el tamaño es menor al especificado. Si ocurre algún error en el tamaño o tipo de archivo, el bloque if-else lo maneja. Luego, la imagen se copia a un MemoryStream. Finalmente, la imagen se convierte a un arreglo de bytes ya que IronOcr.OcrInput puede aceptar una imagen en formato binario.

El método GetText utiliza IronOCR para leer texto de la imagen de entrada. IronOCR utiliza el último motor Tesseract 5 y está disponible en más de 127 idiomas. La imagen convertida a una matriz de bytes se pasa como OcrInput y el resultado se recupera utilizando el método Read de IronTesseract. IronTesseract desarrollado por el equipo de IronOCR es la versión extendida de Google Tesseract. Para obtener más información, visite el ejemplo de C# Tesseract OCR.

Finalmente, el texto extraído se guarda en la variable imageText para su visualización. La biblioteca admite imágenes de texto en inglés sin necesidad de configuración adicional. Puedes echar un vistazo a cómo usar diferentes idiomas en esta página de ejemplos de código.

Blazor Frontend UI Component Código fuente

Ahora, cree la interfaz de usuario para la aplicación. Abra el archivo OCR.razor y escriba 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>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@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 interfaz de usuario contiene una etiqueta de archivo de entrada para elegir un archivo de imagen y una etiqueta de imagen para mostrar la imagen. Hay un botón debajo del campo de entrada que activa el método GetText. Hay un área de texto que se utiliza para mostrar el texto extraído de los datos de la imagen.

Añadir enlace al menú de navegación

Por último, añade un enlace a la página OCR.razor en el archivo NavMenu.razor bajo 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.

Ya está todo terminado y listo para usar. Pulse F5 para ejecutar la aplicación.

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

La interfaz de usuario de la aplicación Blazor Server

Carguemos una imagen y extraigamos texto para visualizar el resultado.

Imágenes subidas y textos extraídos

El texto de salida es limpio y puede copiarse desde el área de texto.

Resumen

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

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