.NET MAUI OCR Using IronOCR

Voraussetzungen

Für die Erstellung einer OCR-App in .NET MAUI sind dies die Voraussetzungen:

1. Visual Studio 2022 (Neueste Version)
2. .NET 6 oder 7
3. MAUI-Pakete, die in Visual Studio installiert sind
4. Ein .NET MAUI-Projekt, das in Visual Studio läuft

Installieren Sie IronOCR

Der erste Schritt besteht darin, die IronOCR-Bibliothek mit der NuGet-Paket-Manager-Konsole zu installieren. Öffnen Sie die NuGet-Paket-Manager-Konsole, indem Sie im Lösungsexplorer mit der rechten Maustaste klicken und den folgenden Befehl ausführen, um die IronOCR-Bibliothek zu installieren:

Install-Package IronOcr

Frontend-Design

Wir werden das Frontend der Anwendung in diesem Abschnitt entwerfen. Öffnen Sie die Datei MainPage.xaml.

class="content-img-align-center">

MainPage.xaml

Wir weisen einen Button zu, der uns hilft, das Bild oder das PDF-Dokument für OCR auszuwählen. Die Clicked-Eigenschaft des Buttons wird so eingestellt, dass die Funktion IOCR ausgeführt wird, die wir im nächsten Abschnitt definieren werden.

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

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

Hier erstellen wir ein Image-Element mit dem Namen OCRImage. Dieses Bildfenster zeigt die ausgewählte Datei an.

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

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

Als Nächstes erstellen wir eine Editor-Steuerung. Es wird verwendet, um den extrahierten Text aus dem Bild oder PDF-Dokument anzuzeigen.

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

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

Hier ist das vollständige Markup der XAML-Benutzeroberfläche.

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

Jetzt ist es an der Zeit, den Code für die OCR-Funktionalität zu schreiben.

Code für OCR mit IronOCR

Öffnen Sie die Klassen-Datei MainPage.xaml.cs und schreiben Sie die folgende Funktion:

class="content-img-align-center">

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

Lassen Sie uns den obigen Code aufteilen:

• Der Code verwendet den FilePicker, um dem Benutzer das Auswählen einer Bilddatei vom Gerät zu ermöglichen. Der Dateiauswähler ist so konfiguriert, dass nur Bilder zugelassen werden.

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

• Die Image-Steuerung ist so eingestellt, dass das ausgewählte Bild unter Verwendung seines Dateipfades angezeigt wird.

OCRImage.Source = path;

OCRImage.Source = path;

OCRImage.Source = path

• Ein IronTesseract-Objekt wird erstellt, um OCR durchzuführen. Das ausgewählte Bild wird einem OcrInput-Objekt hinzugefügt. Die Read-Methode wird aufgerufen, um Text aus dem Bild zu extrahieren, der dann in der Editor-Steuerung angezeigt wird.

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