Blazor Framework wurde vom ASP.NET Team gebaut, welches zur Entwicklung interaktiver Benutzeroberflächen für Webanwendungen mittels HTML und C# anstelle von JavaScript verwendet wird. Blazor führt C#-Code mithilfe von WebAssembly direkt im Webbrowser aus. Dies macht es einfach, Komponenten mit Logik zu erstellen und zu entwickeln und sie immer wieder zu verwenden. Es ist ein beliebtes Framework für die UI-Entwicklung in C#.

In diesem Artikel werden wir eine Blazor Server-App zum Lesen von Text aus Bilddateien mithilfe von OCR (Optical Character Recognition) mit IronOCR erstellen.

Wie liest man Text aus einem Bild mit optischer Zeichenerkennung in Blazor?

Voraussetzungen

1. Sie müssen die neueste Version von Visual Studio haben. Sie können sie unter diesem Link herunterladen.
2. ASP.NET und Web-Entwicklungsarbeit. Wählen Sie bei der Installation von Visual Studio die Option ASP.NET and Web Development Workload, da diese für dieses Projekt erforderlich ist.
3. IronOCR C# Bibliothek. Wir werden IronOCR verwenden, um Bilddaten in maschinenlesbaren Text zu konvertieren. Sie können die IronOCR-Paket-.DLL-Datei direkt von der Iron-Website oder von der NuGet-Website herunterladen. Eine bequemere Möglichkeit, IronOCR herunterzuladen und zu installieren, ist über den NuGet-Paketmanager in Visual Studio.

Erstellen einer Blazor Server App

Öffnen Sie Visual Studio und folgen Sie den Schritten, um eine Blazor Server App zu erstellen:

1. Klicken Sie auf Neues Projekt erstellen und wählen Sie dann "Blazor Server App" aus den aufgelisteten Projektvorlagen.

   Erstellen einer neuen Blazor Server App in Visual Studio

2. Als Nächstes sollten Sie Ihr Projekt angemessen benennen. Hier nennen wir sie BlazorReadText.

   Konfigurieren Sie das Blazor-Projekt

3. Geben Sie die zusätzlichen Informationen ein und klicken Sie auf Erstellen.

   Auswahl von Long Term Support .NET Framework und zusätzliche Informationen für das Projekt

Die Blazor Server App ist nun erstellt. Nun müssen wir die erforderlichen Pakete installieren, bevor wir die Bilddaten mit IronOCR extrahieren können.

Notwendige Pakete hinzufügen

BlazorInputFile

Der erste Schritt ist die Installation des BlazorInputFile Pakets. Es handelt sich um eine Komponente für Blazor-Anwendungen, mit der einzelne oder mehrere Dateien auf den Server hochgeladen werden können. Diese Komponente wird verwendet, um eine Bilddatei auf der Razor-Seite in der Blazor-Anwendung hochzuladen. Öffnen Sie NuGet-Pakete für Lösungen verwalten und durchstöbern Sie BlazorInputFile.

Installieren Sie das BlazorInputFile Paket

Aktivieren Sie das Kontrollkästchen für das Projekt und klicken Sie auf Installieren.

Öffnen Sie jetzt die Datei _Host.cshtml im Pages-Ordner und fügen Sie die folgende JavaScript-Datei hinzu:

<script src="_content/BlazorInputFile/inputfile.js"></script>

<script src="_content/BlazorInputFile/inputfile.js"></script>

Navigieren Sie zur _Host.cshtml Datei aus dem Lösungsexplorer

Fügen Sie schließlich den folgenden Code in die _Imports.razor Datei ein.

@using BlazorInputFile

@using BlazorInputFile

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using BlazorInputFile

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using BlazorInputFile

IronOCR

IronOCR ist eine C#-Bibliothek zum Scannen und Lesen von Bildern in verschiedenen Formaten. Es bietet die Möglichkeit, mit Bildern in mehr als 125 Sprachen weltweit zu arbeiten.

Um IronOCR zu installieren, öffnen Sie den NuGet Package Manager und suchen Sie nach IronOCR. Wählen Sie das Projekt aus und klicken Sie auf die Schaltfläche Installieren.

IronOCR Paket im NuGet Package Manager installieren

Fügen Sie den IronOCR-Namespace in die _Imports.razor Datei ein:

@using IronOCR

@using IronOCR

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using IronOCR

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using IronOCR

Blazor UI-Komponente erstellen

Eine Komponente stellt eine Benutzeroberfläche mit Geschäftslogik dar, die ein dynamisches Verhalten zeigt. Blazor verwendet Razor Components für Anwendungen. Diese Komponenten können verschachtelt, wiederverwendet und geteilt werden. Standardmäßig werden die Seiten Counter und FetchData in der Anwendung bereitgestellt; Diese müssen für die Einfachheit entfernt werden.

Klicken Sie mit der rechten Maustaste auf den pages-Ordner unter der BlazorReadText Anwendung und wählen Sie dann Hinzufügen > Razor Component. Wenn Sie Razor Component nicht finden, klicken Sie auf Neues Element und wählen Sie aus C# Komponenten "Razor Component". Nennen Sie die Komponente "OCR.razor" und klicken Sie auf Hinzufügen.

Neue Razor-Komponente hinzufügen

Eine bewährte Methode ist es, den Code für diese Razor-Seite wie in einer anderen Klasse zu trennen. Klicken Sie erneut mit der rechten Maustaste auf den Seitenordner und wählen Sie Hinzufügen > Klasse. Benennen Sie die Klasse nach dem Seitennamen und klicken Sie auf Hinzufügen. Blazor ist ein intelligentes Framework, das diese Klasse mit der gleichnamigen Seite verknüpft.

Erstellen Sie eine OCR.razor.cs Code-Datei für die OCR.razor Razor Component

Kommen wir nun zur eigentlichen Code-Implementierung, die Bilddaten mit IronOCR lesen wird.

Blazor OCR.razor UI Component Quellcode zum Lesen von Bilddaten

Um Text in einem Bild zu erkennen, laden Sie das Bild hoch, konvertieren es in Binärdaten und wenden dann die IronOCR-Methode an, um den Text zu extrahieren.

Öffnen Sie die OCR.razor.cs Klasse und schreiben Sie den folgenden Beispiel-Quellcode:

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;
using System.IO;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        // Holds the extracted text from the image
        protected string imageText;
        
        // Holds the base64 string preview of the image
        protected string imagePreview;

        // Byte array to store uploaded image data
        private byte[] imageFileBytes;

        // Default status message for file upload
        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        // Maximum file size allowed (4MB)
        const int MaxFileSize = 4 * 1024 * 1024;

        // Method to handle image preview and size/type validation
        protected async Task ViewImage(IFileListEntry[] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }

            if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes.";
                return;
            }

            if (!file.Type.Contains("image"))
            {
                status = "Please upload a valid image file.";
                return;
            }

            using (var memoryStream = new MemoryStream())
            {
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);
                imagePreview = $"data:image/png;base64,{base64String}";
                status = DefaultStatus;
            }
        }

        // Method to extract text from the uploaded image using IronOCR
        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                using (var ocr = new IronTesseract())
                using (var input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;
using System.IO;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        // Holds the extracted text from the image
        protected string imageText;
        
        // Holds the base64 string preview of the image
        protected string imagePreview;

        // Byte array to store uploaded image data
        private byte[] imageFileBytes;

        // Default status message for file upload
        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        // Maximum file size allowed (4MB)
        const int MaxFileSize = 4 * 1024 * 1024;

        // Method to handle image preview and size/type validation
        protected async Task ViewImage(IFileListEntry[] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }

            if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes.";
                return;
            }

            if (!file.Type.Contains("image"))
            {
                status = "Please upload a valid image file.";
                return;
            }

            using (var memoryStream = new MemoryStream())
            {
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);
                imagePreview = $"data:image/png;base64,{base64String}";
                status = DefaultStatus;
            }
        }

        // Method to extract text from the uploaded image using IronOCR
        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                using (var ocr = new IronTesseract())
                using (var input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

Imports BlazorInputFile
Imports Microsoft.AspNetCore.Components
Imports IronOcr
Imports System.IO
Imports System.Linq
Imports System.Threading.Tasks

Namespace BlazorReadText.Pages

    Public Class OCRModel
        Inherits ComponentBase

        ' Holds the extracted text from the image
        Protected imageText As String

        ' Holds the base64 string preview of the image
        Protected imagePreview As String

        ' Byte array to store uploaded image data
        Private imageFileBytes As Byte()

        ' Default status message for file upload
        Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
        Protected status As String = DefaultStatus

        ' Maximum file size allowed (4MB)
        Const MaxFileSize As Integer = 4 * 1024 * 1024

        ' Method to handle image preview and size/type validation
        Protected Async Function ViewImage(files As IFileListEntry()) As Task
            Dim file = files.FirstOrDefault()
            If file Is Nothing Then
                Return
            End If

            If file.Size > MaxFileSize Then
                status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes."
                Return
            End If

            If Not file.Type.Contains("image") Then
                status = "Please upload a valid image file."
                Return
            End If

            Using memoryStream = New MemoryStream()
                Await file.Data.CopyToAsync(memoryStream)
                imageFileBytes = memoryStream.ToArray()
                Dim base64String As String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length)
                imagePreview = $"data:image/png;base64,{base64String}"
                status = DefaultStatus
            End Using
        End Function

        ' Method to extract text from the uploaded image using IronOCR
        Protected Private Async Function GetText() As Task
            If imageFileBytes IsNot Nothing Then
                Using ocr = New IronTesseract()
                    Using input = New OcrInput(imageFileBytes)
                        Dim result As OcrResult = ocr.Read(input)
                        imageText = result.Text
                    End Using
                End Using
            End If
        End Function
    End Class
End Namespace

Imports BlazorInputFile
Imports Microsoft.AspNetCore.Components
Imports IronOcr
Imports System.IO
Imports System.Linq
Imports System.Threading.Tasks

Namespace BlazorReadText.Pages

    Public Class OCRModel
        Inherits ComponentBase

        ' Holds the extracted text from the image
        Protected imageText As String

        ' Holds the base64 string preview of the image
        Protected imagePreview As String

        ' Byte array to store uploaded image data
        Private imageFileBytes As Byte()

        ' Default status message for file upload
        Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
        Protected status As String = DefaultStatus

        ' Maximum file size allowed (4MB)
        Const MaxFileSize As Integer = 4 * 1024 * 1024

        ' Method to handle image preview and size/type validation
        Protected Async Function ViewImage(files As IFileListEntry()) As Task
            Dim file = files.FirstOrDefault()
            If file Is Nothing Then
                Return
            End If

            If file.Size > MaxFileSize Then
                status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes."
                Return
            End If

            If Not file.Type.Contains("image") Then
                status = "Please upload a valid image file."
                Return
            End If

            Using memoryStream = New MemoryStream()
                Await file.Data.CopyToAsync(memoryStream)
                imageFileBytes = memoryStream.ToArray()
                Dim base64String As String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length)
                imagePreview = $"data:image/png;base64,{base64String}"
                status = DefaultStatus
            End Using
        End Function

        ' Method to extract text from the uploaded image using IronOCR
        Protected Private Async Function GetText() As Task
            If imageFileBytes IsNot Nothing Then
                Using ocr = New IronTesseract()
                    Using input = New OcrInput(imageFileBytes)
                        Dim result As OcrResult = ocr.Read(input)
                        imageText = result.Text
                    End Using
                End Using
            End If
        End Function
    End Class
End Namespace

Im obigen Code:

• Die ViewImage Methode wird verwendet, um die hochgeladene Bilddatei zu verarbeiten. Sie prüft, ob die Datei ein Bild ist und ob die Größe den festgelegten Grenzwert erfüllt. Wenn ein Fehler bei der Dateigröße oder dem Dateityp auftritt, wird er mit einem if-else Block behandelt. Das Bild wird dann in ein MemoryStream kopiert und in ein Byte-Array umgewandelt, da IronOcr.OcrInput ein Bild im Binärformat akzeptieren kann.
• Die GetText Methode nutzt IronOCR, um Text aus dem Eingabebild zu extrahieren. IronOCR verwendet die Tesseract 5-Engine und unterstützt über 125 Sprachen.

Der extrahierte Text wird in der imageText Variable zur Anzeige gespeichert. Die Bibliothek unterstützt englische Textbilder ohne zusätzliche Konfiguration. Auf dieser Code-Beispielseite können Sie mehr über die Verwendung verschiedener Sprachen erfahren.

Blazor Frontend UI Component Quellcode

Erstellen Sie als Nächstes die Benutzeroberfläche der Anwendung. Öffnen Sie die OCR.razor Datei und schreiben Sie den folgenden Code:

@page "/IronOCR"
@inherits OCRModel

<h2>Optical Character Recognition (OCR) Using Blazor and IronOCR Software</h2>

<div class="row">
    <div class="col-md-5">
        <textarea disabled class="form-control" rows="10" cols="15">@imageText</textarea>
    </div>
    <div class="col-md-5">
        <div class="image-container">
            <img class="preview-image" width="800" height="500" src=@imagePreview>
        </div>
        <BlazorInputFile.InputFile OnChange="@ViewImage" />
        <p>@status</p>
        <hr />
        <button class="btn btn-primary btn-lg" @onclick="GetText">
            Extract Text
        </button>
    </div>
</div>

@page "/IronOCR"
@inherits OCRModel

<h2>Optical Character Recognition (OCR) Using Blazor and IronOCR Software</h2>

<div class="row">
    <div class="col-md-5">
        <textarea disabled class="form-control" rows="10" cols="15">@imageText</textarea>
    </div>
    <div class="col-md-5">
        <div class="image-container">
            <img class="preview-image" width="800" height="500" src=@imagePreview>
        </div>
        <BlazorInputFile.InputFile OnChange="@ViewImage" />
        <p>@status</p>
        <hr />
        <button class="btn btn-primary btn-lg" @onclick="GetText">
            Extract Text
        </button>
    </div>
</div>

Im obigen Code enthält die Benutzeroberfläche:

• Ein Eingabedatei-Tag zur Auswahl einer Bilddatei.
• Ein Bild-Tag zur Anzeige des Bildes.
• Ein Button, der die GetText Methode auslöst.
• Ein Textbereich zur Anzeige des aus den Bilddaten extrahierten Textes.

Link zum Navigationsmenü hinzufügen

Fügen Sie schließlich einen Link zur OCR.razor Seite in der NavMenu.razor Datei im Shared-Ordner hinzu:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronOCR">
        <span class="oi oi-plus" aria-hidden="true"></span> Read Image Text
    </NavLink>
</div>

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronOCR">
        <span class="oi oi-plus" aria-hidden="true"></span> Read Image Text
    </NavLink>
</div>

Entfernen Sie die Links zu Counter und FetchData, da sie nicht benötigt werden.

Alles ist nun fertiggestellt und einsatzbereit. Drücken Sie F5, um die Anwendung auszuführen.

Das Frontend sollte wie unten gezeigt aussehen:

Die Benutzeroberfläche der Blazor Server App

Wir laden ein Bild hoch und extrahieren den Text, um die Ausgabe zu visualisieren.

Hochgeladene Bilder und extrahierte Texte

Der Ausgabetext ist sauber, und er kann aus dem Textbereich kopiert werden.

Zusammenfassung

In diesem Artikel wurde gezeigt, wie man eine Blazor UI-Komponente mit dahinter liegendem Code in der Blazor Server-Anwendung erstellt, um Texte aus Bildern zu lesen. IronOCR ist eine vielseitige Bibliothek zur Extraktion von Text in jeder C#-basierten Anwendung. Sie unterstützt das neueste .NET Framework und kann gut mit Razor-Anwendungen verwendet werden. IronOCR ist eine plattformübergreifende Bibliothek, die auf Windows, Linux, macOS, Docker, Azure, AWS und MAUI unterstützt wird. Darüber hinaus bietet IronOCR eine hohe Genauigkeit unter Verwendung der besten Ergebnisse von Tesseract, ohne zusätzliche Einstellungen. Sie unterstützt Multipage frame TIFF, PDF-Dateien und alle gängigen Bildformate. Es ist auch möglich, Barcode-Werte aus Bildern zu lesen.

Sie können IronOCR auch für kostenlos in einer kostenlosen Testversion ausprobieren. Laden Sie die Software-Bibliothek von hier herunter.