Blazor to framework stworzony przez zespół ASP.NET, używany do tworzenia interaktywnych aplikacji internetowych z interfejsem użytkownika za pomocą HTML i C# zamiast JavaScript. Blazor uruchamia kod C# bezpośrednio w przeglądarce internetowej przy użyciu WebAssembly. Ułatwia to tworzenie i rozwijanie komponentów z logiką oraz ich wielokrotne ponowne wykorzystywanie. Jest to popularny framework wśród programistów do tworzenia interfejsów użytkownika w języku C#.

W tym artykułe stworzymy aplikację Blazor Server do odczytu tekstu z plików graficznych przy użyciu optycznego rozpoznawania znaków (OCR) za pomocą IronOCR.

Jak odczytać tekst z obrazu za pomocą optycznego rozpoznawania znaków 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 wymagana 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

BlazorInputFile

Pierwszym krokiem jest zainstalowanie pakietu BlazorInputFile. Jest to komponent dla aplikacji Blazor, służący do przesyłania pojedynczych lub wielu plików na serwer. Ten komponent będzie używany do przesyłania pliku graficznego na stronę Razor w aplikacji Blazor. Otworz Zarzadzaj pakietami NuGet dla rozwiazan i wyszukaj BlazorInputFile.

Zainstaluj pakiet BlazorInputFile

Zaznacz pole wyboru przy projekcie i kliknij Zainstaluj.

Teraz otworz plik _Host.cshtml w folderze Pages i dodaj nastepujacy plik JavaScript:

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

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

Przejdz do pliku _Host.cshtml z Eksploratora rozwiazan

Na koncu dodaj nastepujacy kod do pliku _Imports.razor.

@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

Biblioteka IronOCR w języku C# służąca do skanowania i odczytywania obrazów w różnych formatach. Umożliwia pracę z obrazami w ponad 125 językach na całym świecie.

Aby zainstalować IronOCR, otwórz menedżera pakietów NuGet i wyszukaj IronOCR. Wybierz projekt i kliknij przycisk Instaluj.

Zainstaluj pakiet IronOCR w Menedżerze Pakietów NuGet

Dodaj przestrzen nazw IronOCR do pliku _Imports.razor:

@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

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. Domyslnie strony Counter i FetchData sa dostarczane w aplikacji; usuwając je dla uproszczenia.

Kliknij prawym przyciskiem myszy na folderze pages w aplikacji BlazorReadText, a nastepnie 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.

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

Otworz klase OCR.razor.cs i napisz nastepujacy przyklad kodu zrodlowego:

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

W powyższym kodzie:

• Metoda ViewImage jest uzywana do obslugi przeslanego pliku obrazu. Sprawdza, czy plik jest obrazem, i czy rozmiar spelnia okreslony limit. Jezeli wystapi jakikolwiek blad w rozmiarze lub typie pliku, jest on obslugiwany za pomoca bloku if-else. Obraz jest nastepnie kopiowany do MemoryStream i konwertowany na tablice bajtow, poniewaz IronOcr.OcrInput moze przyjmowac obraz w formacie binarnym.
• Metoda GetText wykorzystuje IronOCR do wyodrebnienia tekstu z obrazu wejsciowego. IronOCR wykorzystuje silnik Tesseract 5 i obsługuje ponad 125 języków.

Wyodrebniony tekst jest przechowywany w zmiennej imageText do wyswietlenia. 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. Otworz plik OCR.razor i napisz nastepujacy 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>

@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, ktory wywoluje metode GetText.
• Obszar tekstowy do wyświetlania tekstu wyodrębnionego z danych obrazu.

Dodaj link do menu nawigacyjnego

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

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

Usun linki do Counter i FetchData, poniewaz nie sa 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.

Podsumowanie

W tym artykułe pokazano, jak utworzyć komponent interfejsu użytkownika Blazor z kodem w aplikacji Blazor Server w celu odczytywania tekstów z obrazów. Biblioteka IronOCR to wszechstronna biblioteka służąca do wyodrębniania tekstu w dowolnej aplikacji opartej na języku C#. Obsługuje najnowszą wersję .NET Framework i dobrze współpracuje z aplikacjami Razor. IronOCR to biblioteka wielopłatformowa obsługiwana w systemach Windows, Linux, macOS, Docker, Azure, AWS i MAUI. Ponadto IronOCR zapewnia wysoką dokładność, wykorzystując najlepsze wyniki z Tesseract, bez żadnych dodatkowych ustawień. Obsługuje wielostronicowe pliki TIFF, pliki PDF oraz wszystkie popularne formaty obrazów. Możliwe jest również odczytywanie wartości BARCODE z obrazów.

Możesz również wypróbować IronOCR za darmo w ramach bezpłatnej wersji próbnej. Pobierz bibliotekę oprogramowania stąd.