Le framework Blazor est construit par l'équipe ASP.NET, qui est utilisé pour développer des applications web interactives avec des interfaces utilisateur utilisables et des applications web interactives utilisant HTML et C# au lieu de JavaScript. Blazor exécute le code C# directement dans le navigateur web en utilisant WebAssembly. Cela rend facile la construction et le développement de composants avec logique et leur réutilisation encore et encore. C'est un framework populaire parmi les développeurs pour construire des interfaces utilisateur en C#.

Dans cet article, nous allons créer une application Blazor Server pour lire le texte à partir de fichiers image en utilisant la reconnaissance optique de caractères (OCR) avec IronOCR.

Comment lire du texte à partir d'une image en utilisant la reconnaissance optique de caractères dans Blazor ?

Prérequis

1. Avoir la dernière version de Visual Studio. Vous pouvez le télécharger à partir de ce lien.
2. Charge de travail ASP.NET et développement Web. Lors de l'installation de Visual Studio, sélectionnez la charge de travail ASP.NET et développement Web pour l'installation car elle est requise pour ce projet.
3. Bibliothèque IronOCR C#. Nous allons utiliser IronOCR pour convertir les données d'image en texte lisible par machine. Vous pouvez télécharger le fichier .DLL du package IronOCR directement à partir du site Iron ou le télécharger à partir du site NuGet. Un moyen plus pratique de télécharger et d'installer IronOCR est à partir du gestionnaire de packages NuGet dans Visual Studio.

Créer une application Blazor Server

Ouvrez Visual Studio et suivez les étapes pour créer une application Blazor Server :

1. Cliquez sur Créer un nouveau projet, puis sélectionnez Blazor Server App parmi les modèles de projet listés.

   Créer une nouvelle application Blazor Server dans Visual Studio

2. Ensuite, nommez votre projet de manière appropriée. Ici, nous le nommons BlazorReadText.

   Configurer le projet Blazor

3. Enfin, définissez les informations supplémentaires et cliquez sur Créer.

   Sélection du Framework .NET à support étendu et informations supplémentaires pour le projet

L'application Blazor Server est maintenant créée. Nous devons maintenant installer les packages nécessaires avant d'extraire les données d'Image en utilisant IronOCR.

Ajout des packages nécessaires

BlazorInputFile

La première étape consiste à installer le paquet BlazorInputFile. C'est un composant pour les applications Blazor et il est utilisé pour télécharger des fichiers uniques ou multiples sur le serveur. Ce composant sera utilisé pour télécharger un fichier image sur la page Razor dans l'application Blazor. Ouvrez Gérer les packages NuGet pour les solutions et recherchez BlazorInputFile.

Install BlazorInputFile package

Cochez la case pour le projet et cliquez sur Installer.

Maintenant, ouvrez le fichier _Host.cshtml dans le dossier Pages et ajoutez le fichier JavaScript suivant :

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

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

Naviguez vers le fichier _Host.cshtml à partir de l'Explorateur de solutions

Enfin, ajoutez le code suivant dans le fichier _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

IronOCR est une bibliothèque C# pour scanner et lire des images dans différents formats. Elle fournit la possibilité de travailler avec des images en plus de 125 langues mondiales.

Pour installer IronOCR, ouvrez le gestionnaire de packages NuGet et recherchez IronOCR. Sélectionnez le projet et cliquez sur le bouton Installer.

Installer le package IronOCR dans le gestionnaire de packages NuGet

Ajoutez l'espace de noms IronOCR dans le fichier _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

Créer un composant UI Blazor

Un composant représente une interface utilisateur avec une logique métier pour exhiber un comportement dynamique. Blazor utilise les composants Razor pour construire ses applications. Ces composants peuvent être imbriqués, réutilisés et partagés entre les projets. Par défaut, les pages Counter et FetchData sont fournies dans l'application ; les retirer pour simplifier.

Cliquez avec le bouton droit sur le dossier pages sous l'application BlazorReadText, puis sélectionnez Ajouter > Composant Razor. Si vous ne trouvez pas Composant Razor, alors cliquez sur Nouvel Élement, et parmi les composants C# sélectionnez "Composant Razor". Nommez le composant "OCR.razor" et cliquez sur Ajouter.

Ajouter un nouveau composant Razor

La meilleure pratique est de séparer le code pour cette page razor dans une autre classe. Encore, cliquez droit sur le dossier pages et sélectionnez Ajouter > Classe. Nommez la classe du même nom que la page et cliquez sur Ajouter. Blazor est un framework intelligent, et il étiquette cette classe avec la page qui partage le même nom.

Créez un fichier de code OCR.razor.cs pour le composant Razor OCR.razor

Maintenant, passons à l'implémentation du code réel qui lira les données d'image en utilisant IronOCR.

Code source du composant UI Blazor OCR.razor pour lire les données d'image

Pour reconnaître du texte dans une image, téléchargez l'image, convertissez-la en données binaires puis appliquez la méthode IronOCR pour extraire le texte.

Ouvrez la classe OCR.razor.cs et écrivez le code source d'exemple suivant :

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

Dans le code ci-dessus :

• La méthode ViewImage est utilisée pour gérer le fichier image téléchargé. Elle valide si le fichier est une image et vérifie si la taille respecte la limite spécifiée. Si une erreur survient concernant la taille ou le type de fichier, elle est gérée à l'aide d'un bloc if-else. L'image est ensuite copiée dans un MemoryStream et convertie en tableau d'octets car IronOcr.OcrInput peut accepter une image au format binaire.
• La méthode GetText utilise IronOCR pour extraire du texte de l'image d'entrée. IronOCR utilise le moteur Tesseract 5 et prend en charge plus de 125 langues.

Le texte extrait est stocké dans la variable imageText pour l'affichage. La bibliothèque prend en charge les images texte en anglais sans configuration supplémentaire. Vous pouvez en savoir plus sur l'utilisation de différentes langues sur cette page d'exemples de code.

Code source du composant UI frontal Blazor

Ensuite, créez l'interface utilisateur pour l'application. Ouvrez le fichier OCR.razor et écrivez le code suivant :

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

Dans le code ci-dessus, l'interface utilisateur comprend :

• Une balise d'entrée de fichier pour choisir un fichier image.
• Une balise image pour afficher l'image.
• Un bouton qui déclenche la méthode GetText.
• Une zone de texte pour afficher le texte extrait des données d'image.

Ajouter un lien au menu de navigation

Enfin, ajoutez un lien vers la page OCR.razor dans le fichier NavMenu.razor sous le dossier Partagé :

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

Supprimez les liens vers Counter et FetchData, car ils ne sont pas nécessaires.

Tout est maintenant terminé et prêt à l'emploi. Appuyez sur F5 pour exécuter l'application.

Le frontend devrait apparaître comme indiqué ci-dessous :

L'interface utilisateur de l'application Blazor Server

Téléchargeons une image et extrayons du texte pour visualiser le résultat.

Images téléchargées et textes extraits

Le texte de sortie est clair, et il peut être copié de la zone de texte.

Résumé

Cet article a démontré comment créer un composant UI Blazor avec du code derrière dans l'application Blazor Server pour lire des textes à partir d'images. IronOCR est une bibliothèque polyvalente pour extraire du texte dans toute application basée sur C#. Elle prend en charge le dernier Framework .NET et peut être bien utilisée avec les applications Razor. IronOCR est une bibliothèque multiplateforme prise en charge sur Windows, Linux, macOS, Docker, Azure, AWS, et MAUI. De plus, IronOCR offre une haute précision en utilisant les meilleurs résultats de Tesseract, sans aucun paramètre supplémentaire. Il prend en charge les fichiers TIFF multipages , les fichiers PDF et tous les formats d'image courants. Il est également possible de lire les valeurs des codes-barres à partir d'images .

Vous pouvez également essayer IronOCR gratuitement dans une version d'essai. Téléchargez la bibliothèque logicielle depuis ici.