Cómo leer texto de una imagen en Blazor

Prerequisites

1. Have the latest version of Visual Studio. You can download it from this link.
2. ASP.NET and Web Development workload. While installing Visual Studio, select ASP.NET and Web Development workload for installation as it is required for this project.
3. IronOCR C# Library. We are going to use IronOCR to convert image data to machine-readable text. You can download the IronOCR package .DLL file directly from the Iron website or download it from the NuGet website. A more convenient way to download and install IronOCR is from the NuGet Package Manager in Visual Studio.

Create a Blazor Server App

Open Visual Studio and follow the steps to create a Blazor Server App:

1. Click Create a New Project and then Select "Blazor Server App" from the listed project templates.

   Create a new Blazor Server App in Visual Studio

2. Next, name your project appropriately. Here, we are naming it BlazorReadText.

   Configure the Blazor project

3. Finally, set the additional information and click Create.

   Selecting Long Term Support .NET Framework and additional information for the project

The Blazor Server App is now created. Now we need to install the necessary packages before extracting Image data using IronOCR.

Adding Necessary Packages

<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

Create Blazor UI Component

A component represents a user interface with business logic to exhibit dynamic behavior. Blazor uses Razor Components to build its apps. These components can be nested, reused, and shared among projects. By default, the Counter and FetchData pages are provided in the application; removing those for simplicity.

Right-click on the pages folder under the BlazorReadText application, and then select Add > Razor Component. If you do not find Razor Component, then click on New Item, and from C# components select "Razor Component". Name the component "OCR.razor" and click Add.

Add new Razor Component

A best practice is to separate the code for this razor page as in another class. Again, right-click on the pages folder and select Add > Class. Name the class the same as the page name and click Add. Blazor is a smart framework, and it tags this class with the page that shares the same name.

Create an OCR.razor.cs code file for OCR.razor Razor Component

Now, let's move to the actual code implementation which will read image data using IronOCR.

Blazor OCR.razor UI Component Source code to Read Image Data

To recognize text in an image, upload the image, convert it to binary data and then apply the IronOCR method to extract text.

Open the OCR.razor.cs class and write the following example source code:

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

In the above code:

• The ViewImage method is used to handle the uploaded image file. It validates whether the file is an image and checks if the size meets the specified limit. If any error occurs in file size or file type, it is handled using an if-else block. The image is then copied to a MemoryStream and converted to a byte array as IronOcr.OcrInput can accept an image in binary format.
• The GetText method utilizes IronOCR to extract text from the input image. IronOCR employs the Tesseract 5 engine and supports 125+ languages.

The extracted text is stored in the imageText variable for display. The library supports English text images without additional configuration. You can learn more about using different languages on this code example page.

Blazor Frontend UI Component Source code

Next, create the UI for the application. Open the OCR.razor file and write the following code:

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

In the code above, the UI includes:

• An input file tag to choose an image file.
• An image tag to display the image.
• A button that triggers the GetText method.
• A text area to display the extracted text from image data.

Add Link to Navigation Menu

Lastly, add a link to the OCR.razor page in the NavMenu.razor file under the Shared folder:

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

Remove the links to Counter and FetchData, as they are not needed.

Everything is now completed and ready to use. Press F5 to run the application.

The frontend should appear as shown below:

The UI of the Blazor Server App

Let's upload an image and extract text to visualize the output.

Uploaded images and extracted texts

The output text is clean, and it can be copied from the text area.