.NET MAUI OCR mit IronOCR – Bild zu Text in plattformübergreifenden Apps

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.

MainPage.xaml

Wir weisen einen Button zu, der uns hilft, das Bild oder das PDF-Dokument für OCR auszuwählen. Die Eigenschaft Clicked des Buttons ist 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. Dieser Bildbereich 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 ein Editor Steuerelement. 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 Klassendatei MainPage.xaml.cs und schreiben Sie die folgende Funktion:

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 FilePicker, um dem Benutzer die Auswahl einer Bilddatei vom Gerät zu ermöglichen. Die Dateiauswahl 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()

• Das Steuerelement Image ist so eingestellt, dass es das ausgewählte Bild anhand seines Dateipfads anzeigt.

OCRImage.Source = path;

OCRImage.Source = path;

OCRImage.Source = path

• Zur Durchführung der OCR wird ein IronTesseract-Objekt erstellt. Das ausgewählte Bild wird einem OcrInput Objekt hinzugefügt. Die Methode Read wird aufgerufen, um Text aus dem Bild zu extrahieren, der dann im Steuerelement Editor 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