Cómo leer texto de una imagen 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

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

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

@using BlazorInputFile

@using BlazorInputFile

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

@using IronOCR

@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. Por defecto, las páginas Counter y FetchData están provistas en la aplicación; eliminando aquellas para simplicidad.

Haz clic derecho en la carpeta pages bajo la aplicación BlazorReadText, y luego selecciona 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.

Crear 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 ejemplo de código fuente:

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
		Private Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
		Protected status As String = DefaultStatus

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

		' Method to handle image preview and size/type validation
		Protected Async Function ViewImage(ByVal 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 As 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
		Private Protected 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 usa para manejar el archivo de imagen subido. Valida si el archivo es una imagen y verifica si el tamaño cumple con el límite especificado. Si ocurre algún error en el tamaño del archivo o tipo de archivo, se maneja usando un bloque if-else. La imagen se copia entonces a un MemoryStream y 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 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 mostrarlo. 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>

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 debajo de la carpeta Compartir:

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