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-App erstellen, um Text aus Bilddateien mit der optischen Zeichenerkennung (OCR) mit IronOCR zu lesen.

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 über diesen Link herunterladen.

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 IronOCR-Paket .DLL-Datei direkt von der Iron-Website herunterladen oder sie von der NuGet-Website herunterladen. 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 aufgeführten Projektvorlagen.

   

   Erstellen Sie eine neue Blazor Server-App in Visual Studio

2. Benennen Sie Ihr Projekt dann entsprechend. Hier nennen wir es "BlazorReadText".

   

   Konfigurieren Sie das Blazor-Projekt

3. Legen Sie schließlich die zusätzlichen Informationen fest und klicken Sie auf Erstellen.

   

   Auswahl des Long Term Support .NET Frameworks 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 besteht darin, das BlazorInputFile-Paket zu installieren. 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 NuGet-Pakete für Lösungen verwalten und suchen Sie nach BlazorInputFile.

installieren Sie das Paket BlazorInputFile

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

Öffnen Sie nun 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 im Solution 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-Paketmanager

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

@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, diese werden zur Vereinfachung entfernt.

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

Neuen Razor-Komponente hinzufügen

Am besten ist es, den Code für diese Rasierklingen-Seite in einer anderen Klasse unterzubringen. Klicken Sie erneut mit der rechten Maustaste auf den Ordner "pages" 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 Sie eine OCR.razor.cs-Datei für die OCR.razor Razor-Komponente

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 Beispielquellcode:

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 ViewImage-Methode verwendet, um die hochgeladene Datei aus der Eingabedatei zu entnehmen und zu überprüfen, ob es sich um ein Bild handelt und die Größe unter der angegebenen liegt. Wenn ein Fehler bei der Dateigröße oder dem Dateityp auftritt, wird er vom 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ären Format akzeptieren kann.

Die GetText-Methode verwendet IronOCR, um Text aus dem Eingabebild zu lesen. 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 übergeben und das Ergebnis wird mit der IronTesseract Read-Methode abgerufen. IronTesseract, entwickelt vom IronOCR-Team, ist die erweiterte Version von Google Tesseract. Für weitere Informationen besuchen Sie das C# Tesseract OCR-Beispiel.

Schließlich wird der extrahierte Text in der Variable imageText zur Anzeige gespeichert. Die Bibliothek unterstützt englische Textbilder ohne zusätzliche Konfiguration. Sie können sich ansehen, wie verschiedene Sprachen auf dieser Beispielseite für Code verwendet werden.

Blazor Frontend UI-Komponente Quellcode

Erstellen Sie nun die Benutzeroberfläche für die Anwendung. Öffne die OCR.razor-Datei und schreibe 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. Es gibt eine Schaltfläche unterhalb des Eingabefeldes, die die GetText-Methode auslöst. Es gibt einen Textbereich, der dazu dient, den aus den Bilddaten extrahierten Text anzuzeigen.

Link zum Navigationsmenü hinzufügen

Fügen Sie abschließend einen Link zur OCR.razor-Seite 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:

Das UI 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 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. Es unterstützt mehrseitige TIFF-Rahmen, PDF-Dateien und alle gängigen Bildformate. Es ist auch möglich, Barcode-Werte aus Bildern zu lesen.

Sie können IronOCR auch in einem kostenlosen Test kostenlos ausprobieren. Laden Sie die Softwarebibliothek von hier herunter.