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 Blazor Server para leer texto de archivos de imagen utilizando el 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. Puede descargarlo en 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 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 de la página Sitio web de Iron o descárguelo de 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. Haga clic en Crear un nuevo proyecto y seleccione "Blazor Server App " de la lista de plantillas de proyecto.

   

    **Crea una nueva aplicación Blazor Server en Visual Studio**.

2. A continuación, asigne un nombre apropiado a su proyecto. Aquí, le estamos dando el nombre "BlazorReadText".

   

    **Configurar el proyecto Blazor**

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

   

    **Selección del marco .NET de apoyo a largo plazo e 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

Archivo de entrada Blazor

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 Manage NuGet Packages for Solutions y busque BlazorInputFile.

Instalar paquete BlazorInputFile

Seleccione la casilla correspondiente al proyecto y haga clic en Instalar.

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

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

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

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

Por último, añada 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 gestor de paquetes NuGet

Añade 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

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. Por defecto, las páginas Counter y FetchData se proporcionan en la aplicación, eliminándolas por simplicidad.

Haga clic con el botón derecho del ratón en la carpeta pages de la aplicación BlazorReadText y seleccione Añadir > Componente Razor. Si no encuentra Razor Component, haga clic en New Item, y desde C# components seleccione "Razor Component". Nombre el componente "OCR.razor" y haga clic en Añadir.

Añadir 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. De nuevo, haga clic con el botón derecho en la carpeta pages y seleccione Add > Class. 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.

Crear 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.

Abra la clase OCR.razor.cs y escriba 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 desde el archivo de entrada y comprobar si se trata de una imagen y el tamaño es menor que el especificado. Si se produce algún error en el tamaño o tipo de archivo, el bloque if-else se encarga de ello. A continuación, la imagen se copia en un MemoryStream. Por último, la imagen 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 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 mediante la función IronTesseract Leer método. IronTesseract desarrollado por el equipo IronOCR es la versión extendida de Google Tesseract. Para más información, visite C# Tesseract OCR ejemplo.

Por último, 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 utilizar las diferentes lenguas en este enlace página de ejemplo de código.

Blazor Frontend UI Component Código fuente

Ahora, cree la interfaz de usuario 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>

'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ñada un enlace a la página OCR.razor en el archivo NavMenu.razor 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.

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 del servidor Blazor.

Carguemos una imagen y extraigamos texto para visualizar el resultado.

Imágenes cargadas 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 y macOS, DockerAzure, AWS y MAUI. Además, IronOCR ofrece una gran precisión utilizando los mejores resultados de Tesseract, sin ajustes adicionales. Admite marco multipágina TIFF, Archivos PDF y todos los formatos de imagen habituales. También es posible leer valores de códigos de barras a partir de imágenes.

También puede probar IronOCR para gratis en una prueba gratuita. Descargue la biblioteca de software desde aquí.