Wie man in Blazor Text aus einem Bild liest

Das Blazor-Framework wurde vom ASP.NET-Team entwickelt und dient der Entwicklung interaktiver UI-Webanwendungen unter Verwendung von HTML und C# anstelle von JavaScript. Blazor führt C#-Code mit 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 unter Entwicklern für die Erstellung von Benutzeroberflächen in C#.

In diesem Artikel werden wir eine Blazor Server Anwendung zum Lesen von Text aus Bilddateien mit optischer Zeichenerkennung erstellen (OCR) mit IronOCR.

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

Voraussetzungen

1. Sie benötigen die neueste Version von Visual Studio. Sie können es von dieser Seite herunterladen link.

2. ASP.NET und Web-Entwicklung Arbeitsbelastung. Wählen Sie bei der Installation von Visual Studio den ASP.NET- und Webentwicklungs-Workload für die Installation aus, da er für dieses Projekt erforderlich ist.

3. IronOCR C# Bibliothek. Wir werden IronOCR verwenden, um Bilddaten in maschinenlesbaren Text umzuwandeln. Sie können die .DLL-Datei des IronOCR-Pakets direkt von der Iron Website oder laden Sie es von der Website NuGet-Website. Ein bequemerer Weg, IronOCR herunterzuladen und zu installieren, ist über den NuGet Package Manager in Visual Studio.

Eine Blazor Server App erstellen

Ö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 Sie eine neue Blazor Server App in Visual Studio**

2. Benennen Sie Ihr Projekt dann entsprechend. Hier benennen wir sie "BlazorReadText ".

   

    **Konfigurieren Sie das Blazor-Projekt**

3. Legen Sie schließlich die zusätzlichen Informationen fest 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.

Hinzufügen notwendiger Pakete

blazorInputFile

Der erste Schritt ist die Installation des Pakets BlazorInputFile. Es ist eine Komponente für Blazor-Anwendungen und wird verwendet, um einzelne oder mehrere Dateien auf den Server hochzuladen. Diese Komponente wird verwendet, um eine Bilddatei auf der Razor-Seite in der Blazor-Anwendung hochzuladen. Öffnen Sie Manage NuGet Packages for Solutions und suchen Sie nach BlazorInputFile.

**Paket "BlazorInputFile" installieren

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

Öffnen Sie nun die Datei "Host.cshtml" im Ordner "Pages" 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 im Projektmappen-Explorer zur Datei _Host.cshtml

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

@using BlazorInputFile

@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 127 globalen Sprachen 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.

Installieren Sie das IronOCR-Paket im NuGet Package Manager

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

@using IronOCR

@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-Komponenten, um seine Anwendungen zu erstellen. Diese Komponenten können verschachtelt, wiederverwendet und zwischen Projekten ausgetauscht werden. Standardmäßig werden die Seiten "Counter" und "FetchData" in der Anwendung bereitgestellt, die der Einfachheit halber entfernt werden.

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

Neue Razor-Komponente hinzufügen

Am besten ist es, den Code für diese Rasierklingen-Seite in einer anderen Klasse unterzubringen. Klicken Sie wiederum mit der rechten Maustaste auf den Seitenordner und wählen Sie Hinzufügen > Klasse. Geben Sie der Klasse den gleichen Namen wie der Seite und klicken Sie auf Hinzufügen. Blazor ist ein intelligentes Framework, das diese Klasse mit der gleichnamigen Seite verknüpft.

Erstellen einer Codedatei OCR.razor.cs für die Razor-Komponente OCR.razor

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

Blazor OCR.razor UI-Komponente 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 Klasse "OCR.razor.cs" und schreiben Sie den folgenden Beispiel-Quellcode:

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        protected string imageText;
        protected string imagePreview;
        byte [] imageFileBytes;

        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        const int MaxFileSize = 4 * 1024 * 1024; // 4MB

        protected async Task ViewImage(IFileListEntry [] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }
            else if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, this is more than the allowed limit of {MaxFileSize} bytes.";
                return;
            }
            else if (!file.Type.Contains("image"))
            {
                status = "Please uplaod a valid image file";
                return;
            }
            else
            {
                var memoryStream = new MemoryStream();
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);

                imagePreview = string.Concat("data:image/png;base64,", base64String);
                memoryStream.Flush();
                status = DefaultStatus;
            }
        }

        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                IronTesseract ocr = new IronTesseract();
                using (OcrInput input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        protected string imageText;
        protected string imagePreview;
        byte [] imageFileBytes;

        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        const int MaxFileSize = 4 * 1024 * 1024; // 4MB

        protected async Task ViewImage(IFileListEntry [] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }
            else if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, this is more than the allowed limit of {MaxFileSize} bytes.";
                return;
            }
            else if (!file.Type.Contains("image"))
            {
                status = "Please uplaod a valid image file";
                return;
            }
            else
            {
                var memoryStream = new MemoryStream();
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);

                imagePreview = string.Concat("data:image/png;base64,", base64String);
                memoryStream.Flush();
                status = DefaultStatus;
            }
        }

        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                IronTesseract ocr = new IronTesseract();
                using (OcrInput input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

Imports BlazorInputFile
Imports Microsoft.AspNetCore.Components
Imports IronOcr

Namespace BlazorReadText.Pages
	Public Class OCRModel
		Inherits ComponentBase

		Protected imageText As String
		Protected imagePreview As String
		Private imageFileBytes() As Byte

		Private Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
		Protected status As String = DefaultStatus

		Private Const MaxFileSize As Integer = 4 * 1024 * 1024 ' 4MB

		Protected Async Function ViewImage(ByVal files() As IFileListEntry) As Task
			Dim file = files.FirstOrDefault()
			If file Is Nothing Then
				Return
			ElseIf file.Size > MaxFileSize Then
				status = $"The file size is {file.Size} bytes, this is more than the allowed limit of {MaxFileSize} bytes."
				Return
			ElseIf Not file.Type.Contains("image") Then
				status = "Please uplaod a valid image file"
				Return
			Else
				Dim memoryStream As New MemoryStream()
				Await file.Data.CopyToAsync(memoryStream)
				imageFileBytes = memoryStream.ToArray()
				Dim base64String As String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length)

				imagePreview = String.Concat("data:image/png;base64,", base64String)
				memoryStream.Flush()
				status = DefaultStatus
			End If
		End Function

		Private Protected Async Function GetText() As Task
			If imageFileBytes IsNot Nothing Then
				Dim ocr As New IronTesseract()
				Using input As New OcrInput(imageFileBytes)
					Dim result As OcrResult = ocr.Read(input)
					imageText = result.Text
				End Using
			End If
		End Function
	End Class
End Namespace

Im obigen Code wird die Methode "ViewImage" verwendet, um die hochgeladene Datei aus der Eingabedatei zu nehmen und zu prüfen, ob es sich um ein Bild handelt und die Größe kleiner als angegeben ist. Tritt ein Fehler in Bezug auf die Dateigröße oder den Dateityp auf, so wird dieser im "if-else"-Block behandelt. Dann wird das Bild in einen MemoryStream kopiert. Schließlich wird das Bild in ein Byte-Array umgewandelt, da IronOcr.OcrInput ein Bild im Binärformat akzeptieren kann.

Die Methode GetText verwendet IronOCR, um text lesen aus dem Eingabebild. IronOCR verwendet die neueste Tesseract 5-Engine und ist in über 127 Sprachen verfügbar. Das in ein Byte-Array konvertierte Bild wird als ocrInput und das Ergebnis wird mit dem Befehl eisen-Tesserakt lesen methode. ironTesseract", entwickelt vom IronOCR-Team, ist die erweiterte Version von Google Tesseract. Für weitere Informationen besuchen Sie die C# Tesseract OCR Beispiel.

Schließlich wird der extrahierte Text in der Variablen imageText zur Anzeige gespeichert. Die Bibliothek unterstützt englische Textbilder ohne zusätzliche Konfiguration. Wie Sie die verschiedenen Sprachen verwenden können, erfahren Sie hier code-Beispielseite.

Blazor Frontend UI-Komponente Quellcode

Erstellen Sie nun die Benutzeroberfläche für die Anwendung. Öffnen Sie die Datei "OCR.razor" 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>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@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 und ein Bild-Tag zur Anzeige des Bildes. Unter dem Eingabefeld befindet sich eine Schaltfläche, die die Methode GetText auslöst. Es gibt einen Textbereich, der dazu dient, den aus den Bilddaten extrahierten Text anzuzeigen.

Link zum Navigationsmenü hinzufügen

Fügen Sie schließlich einen Link zur Seite OCR.razor in der Datei NavMenu.razor im Ordner Shared 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.

Jetzt ist alles fertig und einsatzbereit. Drücken Sie F5, um die Anwendung auszuführen.

Das Frontend sollte wie unten abgebildet aussehen:

Die Benutzeroberfläche der Blazor Server App

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

Hochgeladene Bilder und extrahierte Texte

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

Zusammenfassung

Dieser Artikel hat gezeigt, wie man eine Blazor UI Komponente mit Code dahinter in der Blazor Server Applikation erstellt, um Texte aus Bildern zu lesen. IronOCR ist eine vielseitige Bibliothek zum Extrahieren von Text in jeder C#-basierten Anwendung. Es unterstützt das aktuelle .NET-Framework und kann gut mit Razor-Anwendungen verwendet werden. IronOCR ist eine plattformübergreifende Bibliothek, die von Windows, Linux und macOS unterstützt wird, Dockerazure, AWS und MAUI. Darüber hinaus bietet IronOCR eine hohe Genauigkeit unter Verwendung der besten Ergebnisse von Tesseract, ohne zusätzliche Einstellungen. Sie unterstützt mehrseitenrahmen TIFF, PDF-Dateienund alle gängigen Bildformate. Es ist auch möglich lesen von Barcode-Werten aus Bildern.

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