Wie man Text aus Bildern mit Blazor liest

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. You can download the IronOCR package .DLL file directly from the Iron website or download it from the NuGet website. 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. 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.

Notwendige Pakete hinzufügen

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

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

@using BlazorInputFile

@using BlazorInputFile

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

@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 Components für die Erstellung seiner Anwendungen. Diese Komponenten können verschachtelt, wiederverwendet und zwischen Projekten ausgetauscht werden. Standardmäßig werden die Seiten Counter und FetchData in der Anwendung bereitgestellt; diese müssen der Einfachheit halber entfernt werden.

Klicken Sie mit der rechten Maustaste auf den Ordner Seiten unter der Anwendung BlazorReadText, und wählen Sie dann Hinzufügen > Razor-Komponente. 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 genauso wie den Seitennamen und klicken Sie auf Hinzufügen. Blazor ist ein intelligentes Framework, das diese Klasse mit der gleichnamigen Seite verknüpft.

Erstelle eine OCR.razor.cs Code-Datei für die OCR.razor Razor-Komponente

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 Klasse OCR.razor.cs 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
		Private Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
		Protected status As String = DefaultStatus

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

		' Method to handle image preview and size/type validation
		Protected Async Function ViewImage(ByVal 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 As 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
		Private Protected 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 Methode ViewImage wird verwendet, um die hochgeladene Bilddatei zu behandeln. Sie überprüft, ob es sich bei der Datei um ein Bild handelt und ob die Größe dem angegebenen Limit entspricht. Wenn ein Fehler bei der Dateigröße oder dem Dateityp auftritt, wird er mit einem if-else-Block behandelt. Das Bild wird dann in einen MemoryStream kopiert und in ein Byte-Array konvertiert, da IronOcr.OcrInput ein Bild im Binärformat akzeptieren kann.
• Die Methode GetText 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 Variablen imageText 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

Als Nächstes erstellen Sie 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>

Im obigen Code enthält die Benutzeroberfläche:

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

Link zum Navigationsmenü hinzufügen

Schließlich fügen Sie einen Link zur Seite OCR.razor in der Datei NavMenu.razor im Ordner Shared ein:

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