How to Read Text From Image in Blazor

Blazor framework is built by the ASP.NET team which is used to develop interactive UI web applications using HTML and C# instead of JavaScript. Blazor runs C# code directly in the web browser using WebAssembly. This makes it easy to build and develop components with logic and reuse them over and over again. It is a popular framework among developers for building UI in C#.

In this article, we are going to create a Blazor Server app for reading text from image files using Optical Character Recognition (OCR) with IronOCR.

How to Read Text from Image using Optical Character Recognition in 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

BlazorInputFile

The first step is to install the BlazorInputFile package. It is a component for Blazor applications and is used to upload single or multiple files to the server. This component will be used to upload an image file on the Razor page in the Blazor application. Open Manage NuGet Packages for Solutions and browse for BlazorInputFile.

Install BlazorInputFile package

Select the checkbox for the project and click Install.

Now, open _Host.cshtml file in the Pages folder and add the following JavaScript file:

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

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

Navigate to _Host.cshtml file from Solution Explorer

Finally, add the following code in the _Imports.razor file.

@using BlazorInputFile

@using BlazorInputFile

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using BlazorInputFile

IronOCR

IronOCR is a C# library to scan and read Images in different formats. It provides the facility to work with images in over 127+ global languages.

To install IronOCR, open the NuGet Package Manager and browse for IronOCR. Select the project and click on the Install button.

Install IronOcr package in NuGet Package Manager

Add the IronOCR namespace in _Imports.razor file:

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

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

In the above code, the ViewImage method is used to take the uploaded file from the Input file and check whether it is an image and the size is less than as specified. If any error occurs in file size or file type, the if-else block handles it. Then the image is copied to a MemoryStream. Finally, the image is converted to a byte array as IronOcr.OcrInput can accept an image in binary format.

The GetText method uses IronOCR to read text from the input image. IronOCR uses the latest Tesseract 5 engine and is in 127+ supported languages. The converted image to a byte array is passed as OcrInput and the result is retrieved using the IronTesseract Read method. IronTesseract developed by the IronOCR team is the extended version of Google Tesseract. For more information visit the C# Tesseract OCR example.

Finally, the extracted text is saved in the imageText variable for display. The library supports English text images without additional configuration. You can have a look at how to use different languages on this code example page.

Blazor Frontend UI Component Source code

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

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

In the code above, the UI contains an input file tag to choose an image file and an image tag to display the image. There is a button below the input field that triggers the GetText method. There is a text area that is used to display the extracted text from image data.

Add Link to Navigation Menu

Lastly, add a link to the OCR.razor page in 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.

Summary

This article demonstrated how to create a Blazor UI Component with code behind it in the Blazor Server Application to read texts from images. The IronOCR is a versatile library to extract text in any C#-based application. It supports the latest .NET Framework and can be used well with Razor applications. IronOCR is a cross-platform library supported on Windows, Linux, macOS, Docker, Azure, AWS, and MAUI. Additionally, IronOCR offers high accuracy using the best results from Tesseract, without any additional settings. It supports multipage frame TIFF, PDF files, and all popular image formats. It is also possible to read barcode values from images.

You can also try IronOCR for free in a free trial. Download the software library from here.