O framework Blazor é desenvolvido pela equipe ASP.NET, que é usado para desenvolver aplicações web interativas de interface de usuário usando HTML e C# ao invés de JavaScript. O Blazor executa código C# diretamente no navegador da web usando WebAssembly. Isso facilita a construção e desenvolvimento de componentes com lógica e o seu reuso repetidas vezes. É um framework popular entre desenvolvedores para criar UI em C#.

Neste artigo, vamos criar um aplicativo Blazor Server para ler texto de arquivos de imagem usando o Reconhecimento Óptico de Caracteres (OCR) com IronOCR.

Como ler texto de imagem usando reconhecimento óptico de caracteres no Blazor?

Pré-requisitos

1. Tenha a versão mais recente do Visual Studio. Você pode baixá-lo a partir deste link.
2. Carga de trabalho de Desenvolvimento ASP.NET e Web. Ao instalar o Visual Studio, selecione a carga de trabalho de Desenvolvimento ASP.NET e Web para instalação, pois é necessária para este projeto.
3. Biblioteca IronOCR C#. Vamos usar o IronOCR para converter dados de imagem em texto legível por máquina. Você pode baixar o arquivo .DLL do pacote IronOCR diretamente do site da Iron ou baixá-lo do site do NuGet. Uma maneira mais conveniente de baixar e instalar o IronOCR é a partir do Gerenciador de Pacotes NuGet no Visual Studio.

Criar um App Blazor Server

Abra o Visual Studio e siga os passos para criar um App Blazor Server:

1. Clique em Criar um Novo Projeto e, em seguida, selecione "Blazor Server App" dos modelos de projeto listados.

   Crie um novo App Blazor Server no Visual Studio

2. Em seguida, nomeie seu projeto de forma apropriada. Aqui, estamos chamando de BlazorReadText.

   Configure o projeto Blazor

3. Finalmente, defina as informações adicionais e clique em Criar.

   Selecionando suporte de longo prazo do .NET Framework e informações adicionais para o projeto

O App Blazor Server está agora criado. Agora precisamos instalar os pacotes necessários antes de extrair os dados da imagem usando o IronOCR.

Adicionando Pacotes Necessários

BlazorInputFile

O primeiro passo é instalar o pacote BlazorInputFile. É um componente para aplicativos Blazor e é usado para fazer upload de arquivos únicos ou múltiplos para o servidor. Este componente será usado para fazer o upload de um arquivo de imagem na página Razor no aplicativo Blazor. Abra Gerenciar Pacotes NuGet para Soluções e procure por BlazorInputFile.

Install BlazorInputFile package

Marque a caixa de seleção para o projeto e clique em Instalar.

Agora, abra o arquivo _Host.cshtml na pasta Pages e adicione o seguinte arquivo JavaScript:

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

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

Navegar para o arquivo _Host.cshtml do Solution Explorer

Finalmente, adicione o seguinte código no arquivo _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 é uma biblioteca C# para escanear e ler imagens em diferentes formatos. Ela oferece a funcionalidade de trabalhar com imagens em mais de 125 idiomas globais.

Para instalar o IronOCR, abra o Gerenciador de Pacotes NuGet e procure por IronOCR. Selecione o projeto e clique no botão Instalar.

Instale o pacote IronOCR no Gerenciador de Pacotes NuGet

Adicione o namespace IronOCR no arquivo _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

Criar Componente de UI Blazor

Um componente representa uma interface de usuário com lógica de negócios para exibir comportamento dinâmico. O Blazor usa Componentes Razor para construir seus aplicativos. Esses componentes podem ser aninhados, reutilizados e compartilhados entre projetos. Por padrão, as páginas Counter e FetchData são fornecidas na aplicação; removendo aqueles para simplicidade.

Clique com o botão direito na pasta pages dentro da aplicação BlazorReadText e, em seguida, selecione Adicionar > Componente Razor. Se você não encontrar o Componente Razor, clique em Novo Item e, nos componentes C#, selecione "Componente Razor". Nomeie o componente como "OCR.razor" e clique em Adicionar.

Adicionar novo Componente Razor

Uma boa prática é separar o código desta página Razor como em outra classe. Novamente, clique com o botão direito na pasta de páginas e selecione Adicionar > Classe. Nomeie a classe com o mesmo nome da página e clique em Adicionar. O Blazor é um framework inteligente, e ele marca esta classe com a página que compartilha o mesmo nome.

Crie um arquivo de código OCR.razor.cs para o Componente Razor OCR.razor

Agora, vamos passar para a implementação do código real que irá ler dados da imagem usando IronOCR.

Código Fonte do Componente UI Blazor OCR.razor para Ler Dados de Imagem

Para reconhecer texto em uma imagem, envie a imagem, converta-a em dados binários e, em seguida, aplique o método IronOCR para extrair o texto.

Abra a classe OCR.razor.cs e escreva o seguinte código fonte de exemplo:

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

No código acima:

• O método ViewImage é usado para lidar com o arquivo de imagem carregado. Ele valida se o arquivo é uma imagem e verifica se o tamanho atende ao limite especificado. Se ocorrer qualquer erro no tamanho ou tipo de arquivo, ele é tratado usando um bloco if-else. A imagem é então copiada para um MemoryStream e convertida para um array de bytes, pois IronOcr.OcrInput pode aceitar uma imagem no formato binário.
• O método GetText utiliza o IronOCR para extrair texto da imagem de entrada. IronOCR emprega o motor Tesseract 5 e suporta mais de 125 idiomas.

O texto extraído é armazenado na variável imageText para exibição. A biblioteca suporta imagens de texto em inglês sem configuração adicional. Você pode aprender mais sobre o uso de diferentes idiomas nesta página de exemplo de código.

Código Fonte do Componente UI Frontend do Blazor

Em seguida, crie a UI para a aplicação. Abra o arquivo OCR.razor e escreva o seguinte código:

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

No código acima, a UI inclui:

• Uma tag de arquivo de entrada para escolher um arquivo de imagem.
• Uma tag de imagem para exibir a imagem.
• Um botão que aciona o método GetText.
• Uma área de texto para exibir o texto extraído dos dados da imagem.

Adicionar Link ao Menu de Navegação

Por último, adicione um link para a página OCR.razor no arquivo NavMenu.razor na pasta 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>

Remova os links para Counter e FetchData, pois não são necessários.

Tudo está agora completo e pronto para uso. Pressione F5 para executar a aplicação.

A interface deve aparecer conforme mostrado abaixo:

A interface do App do Servidor Blazor

Vamos enviar uma imagem e extrair o texto para visualizar o resultado.

Imagens enviadas e textos extraídos

O texto de saída está limpo e pode ser copiado da área de texto.

Resumo

Este artigo demonstrou como criar um Componente UI Blazor com código por trás dele na Aplicação Server Blazor para ler textos de imagens. O IronOCR é uma biblioteca versátil para extrair texto em qualquer aplicação baseada em C#. Ele suporta o mais recente .NET Framework e pode ser bem utilizado com aplicações Razor. IronOCR é uma biblioteca multiplataforma suportada no Windows, Linux, macOS, Docker, Azure, AWS e MAUI. Além disso, IronOCR oferece alta precisão usando os melhores resultados do Tesseract, sem configurações adicionais. Ele suporta TIFF em quadros múltiplos, arquivos PDF e todos os formatos de imagem populares. Também é possível ler valores de código de barras a partir de imagens.

Você também pode experimentar o IronOCR gratuitamente em uma avaliação gratuita. Baixe a biblioteca de software aqui.