Jak odczytać tekst z obrazu w Blazorze

Wymagania wstępne

1. Posiadaj najnowszą wersję programu Visual Studio. Można go pobrać z tego linku.
2. Obciążenie związane z ASP.NET i tworzeniem stron internetowych. Podczas instalacji programu Visual Studio wybierz opcję ASP.NET i Web Development, ponieważ jest ona wymagańa w tym projekcie.
3. Biblioteka IronOCR C#. Wykorzystamy IronOCR do konwersji danych obrazówych na tekst nadający się do odczytu maszynowego. Plik .DLL pakietu IronOCR można pobrać bezpośrednio ze strony internetowej Iron lub ze strony NuGet. Bardziej wygodnym sposobem pobrania i zainstalowania IronOCR jest skorzystanie z menedżera pakietów NuGet w Visual Studio.

Utwórz aplikację Blazor Server

Otwórz program Visual Studio i wykonaj poniższe czynności, aby utworzyć aplikację Blazor Server:

1. Kliknij Utwórz nowy projekt, a następnie wybierz "Aplikacja serwerowa Blazor" z listy szablonów projektów.

   Utwórz nową aplikację Blazor Server w programie Visual Studio

2. Następnie nadaj projektowi odpowiednią nazwę. W tym przypadku nazywamy to BlazorReadText.

   Skonfiguruj projekt Blazor

3. Na koniec wprowadź dodatkowe informacje i kliknij Utwórz.

   Wybór platformy .NET Framework z długoterminowym wsparciem oraz dodatkowe informacje dotyczące projektu

Aplikacja Blazor Server została utworzona. Teraz musimy zainstalować niezbędne pakiety przed wyodrębnieniem danych obrazu za pomocą IronOCR.

Dodawanie niezbędnych pakietów

<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

Utwórz komponent interfejsu użytkownika Blazor

Komponent reprezentuje interfejs użytkownika z logiką biznesową, aby wykazywać dynamiczne zachowanie. Blazor wykorzystuje komponenty Razor do tworzenia aplikacji. Komponenty te można zagnieżdżać, ponownie wykorzystywać i udostępniać między projektami. Domyślnie w aplikacji dostępne są strony Counter i FetchData; usuwając je dla uproszczenia.

Kliknij prawym przyciskiem myszy folder pages w aplikacji BlazorReadText, a następnie wybierz Dodaj > Komponent Razor. Jeśli nie widzisz komponentu Razor, kliknij "Nowy element", a następnie w sekcji komponentów C# wybierz "Komponent Razor". Nazwij komponent "OCR.razor" i kliknij Dodaj.

Dodaj nowy komponent Razor

Najlepszą praktyką jest wyodrębnienie kodu tej strony Razor do osobnej klasy. Ponownie kliknij prawym przyciskiem myszy folder pages i wybierz Dodaj > Klasa. Nadaj klasie nazwę zgodną z nazwą strony i kliknij Dodaj. Blazor to inteligentny framework, który przypisuje tę klasę do strony o tej samej nazwie.

Utwórz plik kodu OCR.razor.cs dla komponentu Razor OCR.razor

Przejdźmy teraz do rzeczywistej implementacji kodu, który będzie odczytywał dane obrazu przy użyciu IronOCR.

Blazor OCR.razor – komponent interfejsu użytkownika Kod źródłowy do odczytu danych obrazu

Aby rozpoznać tekst na obrazie, należy przesłać obraz, przekonwertować go na dane binarne, a następnie zastosować metodę IronOCR w celu wyodrębnienia tekstu.

Otwórz klasę OCR.razor.cs i wpisz następujący przykładowy kod źródłowy:

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

W powyższym kodzie:

• Metoda ViewImage służy do obsługi przesłanego pliku obrazu. Sprawdza, czy plik jest obrazem, oraz czy jego rozmiar mieści się w określonym limicie. W przypadku wystąpienia błędu dotyczącego rozmiaru lub typu pliku, jest on obsługiwany za pomocą bloku if-else. Obraz jest następnie kopiowany do MemoryStream i konwertowany na tablicę bajtów, ponieważ IronOcr.OcrInput może akceptować obraz w formacie binarnym.
• Metoda GetText wykorzystuje IronOCR do wyodrębniania tekstu z obrazu wejściowego. IronOCR wykorzystuje silnik Tesseract 5 i obsługuje ponad 125 języków.

Wyodrębniony tekst jest przechowywany w zmiennej imageText w celu wyświetlenia. Biblioteka obsługuje obrazy tekstu w języku angielskim bez dodatkowej konfiguracji. Więcej informacji na temat korzystania z różnych języków można znaleźć na tej stronie z przykładami kodu.

Kod źródłowy komponentu interfejsu użytkownika Blazor Frontend

Następnie należy stworzyć interfejs użytkownika dla aplikacji. Otwórz plik OCR.razor i wpisz następujący kod:

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

W powyższym kodzie interfejs użytkownika zawiera:

• Tag pliku wejściowego służący do wyboru pliku graficznego.
• Tag obrazu służący do wyświetlenia obrazu.
• Przycisk, który uruchamia metodę GetText.
• Obszar tekstowy do wyświetlania tekstu wyodrębnionego z danych obrazu.

Dodaj link do menu nawigacyjnego

Na koniec dodaj link do strony OCR.razor w pliku NavMenu.razor w folderze Shared:

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

Usuń linki do Counter i FetchData, ponieważ nie są one potrzebne.

Wszystko jest już gotowe do użycia. Naciśnij klawisz F5, aby uruchomić aplikację.

Interfejs użytkownika powinien wyglądać tak, jak pokazano poniżej:

Interfejs użytkownika aplikacji Blazor Server

Prześlijmy obraz i wyodrębnijmy tekst, aby zwizualizować wynik.

Przesłane obrazy i wyodrębnione teksty

Tekst wyjściowy jest przejrzysty i można go skopiować z pola tekstowego.