Comment lire le texte d'une image en Blazor

Prérequis

1. Disposer de la dernière version de Visual Studio. Vous pouvez la 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. Librairie IronOCR C#. Nous allons utiliser IronOCR pour convertir des données d'image en texte lisible par une machine. You can download the IronOCR package .DLL file directly from the Iron website or download it from the NuGet website. Un moyen plus pratique de télécharger et d'installer IronOCR est de le faire à partir du 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éer 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 l'appelons BlazorReadText.

   Comment lire du texte à partir d'une image dans Blazor, Figure 2 : Configurer le projet Blazor Configurer le projet Blazor

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

   Comment lire du texte à partir d'une image dans Blazor, Figure 3 : Sélection du support à long terme .NET Framework et des informations supplémentaires pour le projet Sélection du support à long terme .NET Framework et informations complé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.

Ajouter les paquets nécessaires

<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

Créer un composant d'interface utilisateur Blazor

Un composant représente une interface utilisateur avec une logique d'entreprise pour présenter 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 ; supprimer les éléments de simplicité.

Cliquez avec le bouton droit de la souris sur le dossier pages de l'application BlazorReadText, puis sélectionnez Add > Razor Component. Si vous ne trouvez pas Razor Component, cliquez alors sur Nouvel élément, et à partir des composants C#, sélectionnez "Razor Component". Nommez le composant "OCR.razor" et cliquez sur Ajouter.

Comment lire du texte à partir d'une image dans Blazor, Figure 7 : Ajouter un nouveau composant Razor Ajouter un nouveau composant Razor

Une bonne pratique consiste à séparer le code de cette page de rasoir comme dans une autre classe. Cliquez à nouveau avec le bouton droit de la souris sur le dossier des pages et sélectionnez Add > Class. Donnez à la classe le même nom que celui de la page et cliquez sur Ajouter. Blazor est un cadre intelligent, et il balise cette classe avec la page qui partage le même nom.

Comment lire du texte à partir d'une image dans Blazor, Figure 8 : Créer un fichier de code OCR.razor.cs pour le composant OCR.razor Razor Créer un fichier de code OCR.razor.cs pour le composant OCR.razor Razor

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

Code source du composant interface utilisateur 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 l'exemple de code source 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
		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

Dans le code ci-dessus :

• La méthode ViewImage est utilisée pour traiter 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 dans la taille ou le type de fichier, elle est traité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 le 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 être affiché. La bibliothèque prend en charge les images textuelles en anglais sans configuration supplémentaire. Pour en savoir plus sur l'utilisation de différents langages, consultez la page exemple de code.

Code source du composant Frontend UI de Blazor

Créez ensuite 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>

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

• Une balise de fichier d'entrée 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 de l'image.

Ajouter un lien au menu de navigation

Enfin, ajoutez un lien vers la page OCR.razor dans le fichier NavMenu.razor du 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 exécuter l'application.

La page d'accueil doit se présenter comme suit :

Comment lire du texte à partir d'une image dans Blazor, Figure 9 : L'interface utilisateur de l'application Blazor Server L'interface utilisateur de l'application Blazor Server

Chargeons une image et extrayons du texte pour visualiser le résultat.

Comment lire du texte à partir d'une image dans Blazor, Figure 10 : Image téléchargée et textes extraits Images téléchargées et textes extraits

Le texte de sortie est propre et peut être copié à partir de la zone de texte.