.NET MAUI OCR Using IronOCR

Prérequis

Voici les conditions préalables à la création d'une application OCR en .NET MAUI :

1. Visual Studio 2022 (dernière version)
2. .NET 6 ou 7
3. Paquets MAUI installés dans Visual Studio
4. Un projet MAUI .NET exécuté dans Visual Studio

Installer IronOCR

La première étape consiste à installer la bibliothèque IronOCR à l'aide de la console du gestionnaire de paquets NuGet. Ouvrez la console NuGet Package Manager en cliquant avec le bouton droit de la souris sur l'explorateur de solutions et en exécutant la commande suivante pour installer la bibliothèque IronOCR :

Install-Package IronOcr

Conception frontale

Nous allons concevoir l'interface de l'application dans cette section. Ouvrez le fichier MainPage.xaml.

MainPage.xaml

Nous désignons un bouton qui nous aidera à sélectionner l'image ou le document PDF pour l'OCR. La propriété Clicked du bouton est définie pour exécuter la fonction IOCR que nous définirons dans la section suivante.

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

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

Ici, nous créons un élément Image portant le nom OCRImage. Cette boîte à images affichera le fichier sélectionné.

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

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

Ensuite, nous créons un contrôle Editeur. Elle sera utilisée pour montrer le texte extrait de l'image ou du document PDF.

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

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

Voici le balisage de l'interface utilisateur XAML terminé.

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

Il est maintenant temps d'écrire le code pour la fonctionnalité OCR.

Code pour l'OCR à l'aide d'IronOCR

Ouvrez le fichier de classe MainPage.xaml.cs et écrivez la fonction suivante :

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

Décomposons le code ci-dessus :

• Le code utilise le FilePicker pour permettre à l'utilisateur de sélectionner un fichier image sur l'appareil. Le sélecteur de fichiers est configuré pour n'autoriser que les images.

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()

• Le contrôle Image est configuré pour afficher l'image sélectionnée à l'aide de son chemin d'accès.

OCRImage.Source = path;

OCRImage.Source = path;

OCRImage.Source = path

• Un objet IronTesseract est créé pour effectuer l'OCR. L'image sélectionnée est ajoutée à un objet OcrInput. La méthode Read est appelée pour extraire le texte de l'image, qui est ensuite affiché dans le contrôle 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