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
- Have the latest version of Visual Studio. You can download it from this link.
- 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.
- 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:
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
Next, name your project appropriately. Here, we are naming it BlazorReadText.
Configure the Blazor project
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 125+ 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;
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 anif-else
block. The image is then copied to aMemoryStream
and converted to a byte array asIronOcr.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.
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.
Frequently Asked Questions
What is Blazor?
Blazor is a framework built by the ASP.NET team for developing interactive UI web applications using HTML and C# instead of JavaScript. It runs C# code directly in the web browser using WebAssembly.
What are the prerequisites for creating a Blazor Server App with OCR capabilities?
To create a Blazor Server App with OCR capabilities using IronOCR, you need the latest version of Visual Studio, the ASP.NET and Web Development workload, and the IronOCR C# Library.
How do you create a Blazor Server App in Visual Studio?
Open Visual Studio, click 'Create a New Project', select 'Blazor Server App', name your project, set the additional information, and click 'Create'.
What is the purpose of the BlazorInputFile package?
The BlazorInputFile package is used in Blazor applications to upload single or multiple files to the server, which is necessary for uploading image files in the application.
How do you install the required OCR library in a Blazor Server App?
You can install IronOCR via the NuGet Package Manager in Visual Studio by browsing for IronOCR, selecting your project, and clicking 'Install'.
What does the GetText method do in the OCR.razor.cs class?
The GetText method extracts text from the uploaded image using IronOCR. It reads the image data and uses the Tesseract 5 engine to extract text in multiple languages.
What are the components of the Blazor Frontend UI for OCR?
The Blazor Frontend UI includes an input file tag to choose an image, an image tag to display the preview, a button to trigger text extraction, and a text area to display the extracted text.
How can you add the OCR page to the navigation menu?
Add a link to the OCR.razor page in the NavMenu.razor file under the Shared folder by including a nav item with a NavLink to 'IronOCR'.
What are the benefits of using the OCR library in a Blazor application?
Using IronOCR in a Blazor application offers high accuracy, supports multiple languages, works with various image formats, and can be used cross-platform on Windows, Linux, macOS, Docker, Azure, AWS, and MAUI.