使用IronOCR for .NET MAUI OCR

先決條件

在.NET MAUI中建立 OCR 應用程式需要滿足以下先決條件：

1. Visual Studio 2022（最新版本）
2. .NET 6 或 7
3. Visual Studio 中已安裝 MAUI 套件
4. 一個在 Visual Studio 中執行的.NET MAUI專案

安裝IronOCR

第一步是使用NuGet套件管理器控制台安裝IronOCR庫。 右鍵點選解決方案資源管理器，開啟NuGet套件管理器控制台，然後執行下列命令來安裝IronOCR庫：

Install-Package IronOcr

前端設計

本節我們將設計應用程式的前端。 開啟MainPage.xaml檔案。

MainPage.xaml

我們指定一個按鈕，幫助我們選擇要進行 OCR 辨識的影像或 PDF 文件。 按鈕的 Clicked 屬性設定為執行 IOCR 函數，我們將在下一節中定義該函數。

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

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

在這裡，我們建立一個名為 OCRImage 的 Image 元素。 此圖像框將顯示所選檔案。

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

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

接下來，我們建立一個 Editor 控制項。 它將用於顯示從圖像或 PDF 文件中提取的文字。

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

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

以下是完整的 XAML 使用者介面標記。

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

現在，是時候編寫 OCR 功能的程式碼了。

使用IronOCR 的OCR 程式碼

開啟 MainPage.xaml.cs 類別文件，並編寫以下函數：

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; 
    }
}

讓我們來分析一下上面的程式碼：

• 程式碼使用 FilePicker 允許使用者從裝置中選擇映像檔。文件選擇器配置為僅允許選擇影像。

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

• Image 控制項設定為使用檔案路徑顯示選定的影像。

OCRImage.Source = path;

OCRImage.Source = path;

• 建立一個 IronTesseract 物件來執行 OCR。 選定的圖像被加入到 OcrInput 物件中。 呼叫 Read 方法從圖像中提取文本，然後在 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; 
}