Comment lire le texte d'une image dans Blazor

Le framework Blazor est conçu par l'équipe ASP.NET et permet de développer des applications web à interface utilisateur interactive en utilisant HTML et C# au lieu de JavaScript. Blazor exécute le code C# directement dans le navigateur web à l'aide de WebAssembly. Il est ainsi facile de construire et de développer des composants logiques et de les réutiliser à l'infini. Il s'agit d'un cadre populaire parmi les développeurs pour la construction d'interfaces utilisateur en C#.

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

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

Conditions préalables

1. Disposer de la dernière version de Visual Studio. Vous pouvez le télécharger à partir de ce lien.

2. ASP.NET et charge de travail pour le développement Web. Lors de l'installation de Visual Studio, sélectionnez ASP.NET et la charge de travail de développement Web pour l'installation car elle est nécessaire pour ce projet.

3. Bibliothèque IronOCR C#. Nous allons utiliser IronOCR pour convertir des données d'image en texte lisible par machine. Vous pouvez télécharger le fichier .DLL du package IronOCR directement depuis le site Iron ou le télécharger depuis le site NuGet. Un moyen plus pratique de télécharger et d'installer IronOCR consiste à utiliser le gestionnaire de paquets NuGet dans Visual Studio.

Créer une application serveur Blazor

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 répertoriés.

   Comment lire du texte à partir d'une image dans Blazor, Figure 1 : Créez une nouvelle application Blazor Server dans Visual Studio

   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 complémentaires et cliquez sur Créer.

   

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

   L'application Blazor Server est maintenant créée. Nous devons maintenant installer les paquets nécessaires avant d'extraire des données d'image à l'aide d'IronOCR.

Ajout des paquets nécessaires

BlazorInputFile

La première étape consiste à installer le package BlazorInputFile. Il s'agit d'un composant pour les applications Blazor, utilisé pour télécharger un ou plusieurs fichiers vers le serveur. Ce composant sera utilisé pour télécharger un fichier image sur la page Razor de l'application Blazor. Ouvrez Gérer les packages NuGet pour les solutions et recherchez BlazorInputFile.

Installer le package BlazorInputFile

Cochez la case du 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>

Accédez au fichier _Host.cshtml depuis l'Explorateur de solution

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

IronOCR

IronOCR est une bibliothèque C# permettant de scanner et de lire des images de différents formats. Il permet de travailler avec des images dans plus de 127 langues.

Pour installer IronOCR, ouvrez le gestionnaire de paquets 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

Créer le composant Blazor UI

Un composant représente une interface utilisateur avec une logique d'entreprise pour présenter un comportement dynamique. Blazor utilise des 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 enlever pour plus de simplicité.

Faites un clic droit sur le dossier pages sous l'application BlazorReadText, puis sélectionnez Ajouter > Composant Razor. Si vous ne trouvez pas de composant Razor, cliquez sur Nouvel élément et, parmi les composants C#, sélectionnez "Razor Component". Nommez le composant "OCR.razor" et cliquez sur Ajouter.

Ajouter un nouveau composant Razor

La meilleure pratique consiste à séparer le code de cette page de rasoir dans une autre classe. De nouveau, faites un clic droit sur le dossier des pages et sélectionnez Ajouter > Classe. Donnez à la classe le même nom que celui de la page et cliquez sur Ajouter. Blazor est un cadre intelligent, et il marque 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

Passons maintenant à la mise en œuvre du code réel qui lira les données d'image à l'aide d'IronOCR.

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

Pour reconnaître du texte dans une image, il faut télécharger l'image, la convertir en données binaires, puis appliquer 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;

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

Dans le code ci-dessus, la méthode ViewImage est utilisée pour prendre le fichier téléchargé à partir du fichier d'entrée et vérifier s'il s'agit d'une image et si la taille est inférieure à celle spécifiée. Si une erreur survient concernant la taille ou le type de fichier, le bloc if-else la gère. Ensuite, l'image est copiée vers un MemoryStream. Enfin, l'image est convertie en un tableau d'octets car IronOcr.OcrInput peut accepter une image en format binaire.

La méthode GetText utilise IronOCR pour lire le texte à partir de l'image d'entrée. IronOCR utilise le dernier moteur Tesseract 5 et est disponible dans plus de 127 langues. L'image convertie en tableau d'octets est transmise sous forme de OcrInput et le résultat est récupéré en utilisant la méthode IronTesseract Read. IronTesseract développé par l'équipe IronOCR est la version étendue de Google Tesseract. Pour plus d'informations, visitez l'exemple C# Tesseract OCR.

Enfin, le texte extrait est enregistré dans la variable imageText pour l'affichage. La bibliothèque prend en charge les images textuelles en anglais sans configuration supplémentaire. Vous pouvez consulter comment utiliser différentes langues sur cette page d'exemple de code.

Blazor Frontend UI Component Source code

Créez maintenant l'interface utilisateur de 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>

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

Dans le code ci-dessus, l'interface utilisateur contient une balise input file pour choisir un fichier image et une balise image pour afficher l'image. Il y a un bouton sous le champ de saisie qui déclenche la méthode GetText. Une zone de texte est utilisée pour afficher le texte extrait des données de l'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 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>

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

Tout est maintenant terminé et prêt à être utilisé. Appuyez sur F5 pour lancer l'application.

La page d'accueil doit s'afficher comme indiqué ci-dessous :

L'interface utilisateur de l'application Blazor Server

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 propre et peut être copié à partir de la zone de texte.

Résumé

Cet article a montré comment créer un composant d'interface utilisateur Blazor avec du code dans l'application serveur Blazor pour lire des textes à partir d'images. L'IronOCR est une bibliothèque polyvalente permettant d'extraire du texte dans n'importe quelle application basée sur C#. Il prend en charge le dernier Framework .NET et peut être utilisé avec les applications Razor. IronOCR est une bibliothèque multiplateforme prise en charge sur Windows, Linux, macOS, Docker, Azure, AWS et MAUI. En outre, IronOCR offre une grande précision en utilisant les meilleurs résultats de Tesseract, sans aucun réglage supplémentaire. Il prend en charge les TIFF multi-pages, les fichiers PDF et tous les formats d'image populaires. Il est également possible de lire les valeurs de codes-barres à partir d'images.

Vous pouvez également essayer IronOCR gratuitement dans le cadre d'un essai gratuit. Téléchargez la bibliothèque logicielle depuis ici.