OCR de .NET MAUI con IronOCR

Prerrequisitos

Para crear una aplicación OCR en .NET MAUI, estos son los requisitos previos:

1. Visual Studio 2022 (Última versión)
2. .NET 6 o 7
3. Paquetes MAUI instalados en Visual Studio
4. Un proyecto .NET MAUI ejecutándose en Visual Studio

Instalar IronOCR

El primer paso es instalar la biblioteca IronOCR usando la Consola del Gestor de Paquetes NuGet. Abre la Consola del Gestor de Paquetes NuGet haciendo clic derecho en el explorador de soluciones y ejecutando el siguiente comando para instalar la biblioteca IronOCR:

Install-Package IronOcr

Diseño de frontend

Diseñaremos el frontend de la aplicación en esta sección. Abre el archivo MainPage.xaml.

MainPage.xaml

Desginamos un botón que nos ayudará a seleccionar la imagen o documento PDF para OCR. La propiedad Clicked del botón está configurada para ejecutar la función IOCR que definiremos en la próxima sección.

<Button
    x:Name="OCR"
    Text="Click to OCR"
    Clicked="IOCR"
    HorizontalOptions="Center" />

<Button
    x:Name="OCR"
    Text="Click to OCR"
    Clicked="IOCR"
    HorizontalOptions="Center" />

Aquí, creamos un elemento Image con el nombre OCRImage. Este cuadro de imagen mostrará el archivo seleccionado.

<Image
    x:Name="OCRImage"
    SemanticProperties.Description="Selected Image"
    HeightRequest="300"
    HorizontalOptions="Center" />

<Image
    x:Name="OCRImage"
    SemanticProperties.Description="Selected Image"
    HeightRequest="300"
    HorizontalOptions="Center" />

A continuación, creamos un control Editor. Se usará para mostrar el texto extraído de la imagen o documento PDF.

<Editor
    x:Name="outputText"
    HorizontalOptions="Center"
    WidthRequest="600"
    HeightRequest="300" />

<Editor
    x:Name="outputText"
    HorizontalOptions="Center"
    WidthRequest="600"
    HeightRequest="300" />

Aquí está el marcado de la interfaz de usuario XAML completo.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="IronOCR_MAUI_Test.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">
            <Button
                x:Name="OCR"
                Text="Click to OCR"
                Clicked="IOCR"
                HorizontalOptions="Center" />
            <Image
                x:Name="OCRImage"
                SemanticProperties.Description="Selected Image"
                HeightRequest="300"
                HorizontalOptions="Center" />

            <Editor
                x:Name="outputText"
                HorizontalOptions="Center"
                WidthRequest="600"
                HeightRequest="300" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="IronOCR_MAUI_Test.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">
            <Button
                x:Name="OCR"
                Text="Click to OCR"
                Clicked="IOCR"
                HorizontalOptions="Center" />
            <Image
                x:Name="OCRImage"
                SemanticProperties.Description="Selected Image"
                HeightRequest="300"
                HorizontalOptions="Center" />

            <Editor
                x:Name="outputText"
                HorizontalOptions="Center"
                WidthRequest="600"
                HeightRequest="300" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Ahora, es hora de escribir el código para la funcionalidad OCR.

Código para OCR usando IronOCR

Abre el archivo de clase MainPage.xaml.cs y escribe la siguiente función:

MainPage.xaml.cs

private async void IOCR(object sender, EventArgs e)
{
    // Prompt user to select an image using FilePicker
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });

    // Get the full path of the selected image
    var path = images.FullPath.ToString();

    // Display the selected image in the Image control
    OCRImage.Source = path;

    // Create an IronTesseract object to perform OCR
    var ocr = new IronTesseract();

    // Perform OCR and extract text from the selected image
    using (var input = new OcrInput())
    {
        input.AddImage(path); // Add image to the OCR input
        OcrResult result = ocr.Read(input); // Perform OCR
        string text = result.Text; // Extract text

        // Display extracted text in the Editor control
        outputText.Text = text; 
    }
}

private async void IOCR(object sender, EventArgs e)
{
    // Prompt user to select an image using FilePicker
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });

    // Get the full path of the selected image
    var path = images.FullPath.ToString();

    // Display the selected image in the Image control
    OCRImage.Source = path;

    // Create an IronTesseract object to perform OCR
    var ocr = new IronTesseract();

    // Perform OCR and extract text from the selected image
    using (var input = new OcrInput())
    {
        input.AddImage(path); // Add image to the OCR input
        OcrResult result = ocr.Read(input); // Perform OCR
        string text = result.Text; // Extract text

        // Display extracted text in the Editor control
        outputText.Text = text; 
    }
}

Private Async Sub IOCR(ByVal sender As Object, ByVal e As EventArgs)
	' Prompt user to select an image using FilePicker
	Dim images = Await FilePicker.Default.PickAsync(New PickOptions With {
		.PickerTitle = "Pick image",
		.FileTypes = FilePickerFileType.Images
	})

	' Get the full path of the selected image
	Dim path = images.FullPath.ToString()

	' Display the selected image in the Image control
	OCRImage.Source = path

	' Create an IronTesseract object to perform OCR
	Dim ocr = New IronTesseract()

	' Perform OCR and extract text from the selected image
	Using input = New OcrInput()
		input.AddImage(path) ' Add image to the OCR input
		Dim result As OcrResult = ocr.Read(input) ' Perform OCR
		Dim text As String = result.Text ' Extract text

		' Display extracted text in the Editor control
		outputText.Text = text
	End Using
End Sub

Desglosamos el código anterior:

• El código utiliza el FilePicker para permitir al usuario seleccionar un archivo de imagen desde el dispositivo. El selector de archivos está configurado para permitir solo imágenes.

var images = await FilePicker.Default.PickAsync(new PickOptions
{
    PickerTitle = "Pick image",
    FileTypes = FilePickerFileType.Images
});
var path = images.FullPath.ToString();

var images = await FilePicker.Default.PickAsync(new PickOptions
{
    PickerTitle = "Pick image",
    FileTypes = FilePickerFileType.Images
});
var path = images.FullPath.ToString();

Dim images = Await FilePicker.Default.PickAsync(New PickOptions With {
	.PickerTitle = "Pick image",
	.FileTypes = FilePickerFileType.Images
})
Dim path = images.FullPath.ToString()

• El control Image está configurado para mostrar la imagen seleccionada usando su ruta de archivo.

OCRImage.Source = path;

OCRImage.Source = path;

OCRImage.Source = path

• Se crea un objeto IronTesseract para realizar OCR. La imagen seleccionada se agrega a un objeto OcrInput. Se llama al método Read para extraer texto de la imagen, que luego se muestra en el control Editor.

var ocr = new IronTesseract();
using (var input = new OcrInput())
{
    input.AddImage(path);
    OcrResult result = ocr.Read(input);
    string text = result.Text;
    outputText.Text = text; 
}

var ocr = new IronTesseract();
using (var input = new OcrInput())
{
    input.AddImage(path);
    OcrResult result = ocr.Read(input);
    string text = result.Text;
    outputText.Text = text; 
}

Dim ocr = New IronTesseract()
Using input = New OcrInput()
	input.AddImage(path)
	Dim result As OcrResult = ocr.Read(input)
	Dim text As String = result.Text
	outputText.Text = text
End Using