Image to Text Conversion in ASP.NET Core 6

Image to text conversion can be a useful feature in many ASP.NET Core applications. Whether it’s extracting text from scanned documents, identifying license plates from photos, or processing receipts to track expenses, the ability to convert images to text can save a lot of time and effort.

In my previous article, I explained dependency injection in ASP.NET Core 6 which you may want to read.

In this article, we’ll explore how to convert an image to text in ASP.NET Core 6. We’ll also provide a real-world example of how this feature can be used in an application.

Before we dive into the code, let’s first understand how image to text conversion works.

OCR (Optical Character Recognition) is the technology that allows us to convert an image into text. OCR engines use algorithms to analyze the image and recognize characters and words. This technology has come a long way in recent years, and some OCR engines can recognize handwritten text and even recognize text from multiple languages.

There are several OCR engines available, some open source, while others are commercial products. In this article, we will use the Tesseract OCR engine, which is an open source OCR engine that is widely used and supported by a large community.

Step 1: Setting up the project

To get started, let’s create a new ASP.NET Core 6 project in Visual Studio. We’ll use ASP.NET Core MVC for this example, but the same principles can be applied to other ASP.NET Core frameworks.

Step 2: Adding the Tesseract OCR engine

We need to download and add the Tesseract OCR engine to our project. You can download the latest version of the Tesseract OCR engine from GitHub.

Once you’ve downloaded the Tesseract OCR engine, extract the files and copy them to a folder in your project. For example, you can create a folder named “Tesseract” in your project and copy the files to this folder.

Step 3: Adding the Tesseract OCR shell

Tesseract’s OCR engine is written in C++, so we need to use a shell to call the OCR engine from our ASP.NET Core application. One popular wrapper for Tesseract OCR is the Tesseract-OCR-for-.NET library, which provides a .NET wrapper around the Tesseract OCR engine.

You can download the Tesseract-OCR-for-.NET library from NuGet. To add the library to your project, right-click the project in Visual Studio and select “Manage NuGet Packages”. Search for “tesseract-ocr-for-net” and install the latest version.

Step 4: Creating the image upload form

Next, let’s create an image upload form that allows users to upload an image for conversion. We will use ASP.NET Core Tag Helpers to create the form.

Below is the code for the image upload form:

<form method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="imageFile">Select an image file:</label>
        <input type="file" class="form-control-file" id="imageFile" name="imageFile">
    </div>
    <button type="submit" class="btn btn-primary">Convert to Text</button>
</form>
 
<div class="mt-3">
    @if (ViewBag.ConvertedText != null)
    {
        <h4>Converted Text:</h4>
        <p>@ViewBag.ConvertedText</p>
    }
</div>

This code creates a form that allows users to select an image file using a file input field. We also add a button that activates the conversion process with a click. Finally, we add a section to display the converted text.

Step 5: Writing the conversion code

Now that we have the image upload form, let’s write the code that converts the image to text. We will use the Tesseract-OCR library to call the Tesseract OCR engine and extract text from the uploaded image.

Here is the code for the conversion process:

[HttpPost]
public async Task<IActionResult> ConvertImageToText(IFormFile imageFile)
{
    if (imageFile == null || imageFile.Length == 0)
    {
        ViewBag.ConvertedText = "Please select an image file.";
        return View("Index");
    }
 
    var filePath = Path.Combine(_hostEnvironment.ContentRootPath, "uploads", imageFile.FileName);
 
    using (var stream = new FileStream(filePath, FileMode.Create))
    {
        await imageFile.CopyToAsync(stream);
    }
 
    using (var engine = new TesseractEngine(Path.Combine(_hostEnvironment.ContentRootPath, "tessdata"), "eng"))
    {
        using (var img = Pix.LoadFromFile(filePath))
        {
            using (var page = engine.Process(img))
            {
                ViewBag.ConvertedText = page.GetText();
            }
        }
    }
 
    return View("Index");
}

Let’s break down this code.

First, we check if an image file has been uploaded. If no file was uploaded, we display an error message and return to the index view.

If a file has been uploaded, we save it in a folder called “uploads” in our project directory.

Next, we create a new TesseractEngine object and specify the path to the tessdata folder (where the OCR engine data is stored) and the language we want to use (in this case, English).

We load the image file using the Pix.LoadFromFile method and then process the image using the TesseractEngine.Process method. This method returns a Page object containing the identified text.

Finally, we display the converted text in the index view using ViewBag.

Step 6: Launching the app

Now we are ready to run our application and test the image to text conversion feature.

When we run the application, we will see the image upload form. We can select an image file and click the “Convert to Text” button to start the conversion process.

After the conversion process is complete, the converted text will be displayed below the image upload form.

A realistic example

Let’s consider a real-world example of how the Image to Text conversion feature can be used in an ASP.NET Core application.

Let’s say we’re building an expense tracking application that allows users to upload receipts and automatically extract the transaction details from the receipt. To achieve this, we can use the Image to Text feature to extract the text from the uploaded receipt image.

We can then use the extracted text to populate the transaction details, such as the date, merchant name, and transaction amount. This can save a lot of time and effort for the user, as he no longer needs to manually enter transaction details.

People also looking for:

• Convert image to text in ASP.NET Core 6
• Convert images to text using Tesseract OCR in ASP.NET Core 6
• ASP.NET Core 6 converts image to text
• Integrating an OCR engine in ASP.NET Core 6
• How to convert image to text in ASP.NET Core 6
• Tesseract-OCR-for-.NET in ASP.NET Core 6
• Image recognition in ASP.NET Core 6
• ASP.NET Core 6 image processing and text extraction
• Server-side image to text conversion in ASP.NET Core 6
• Building an image to text converter with ASP.NET Core 6 and Tesseract OCR.

badges: OCR, Image Recognition, Text Recognition, Machine Learning for OCR, Image Processing, Character Extraction, Text Extraction, Natural Language Processing, Document Digitization, Intelligent Character Recognition, ASP.NET Core 6, Tesseract, United States.

Summary

In this article, we explored how to convert an image to text in an ASP.NET Core 6 application using the Tesseract OCR engine and the Tesseract-OCR-for-.NET library. We have also provided a realistic example of how this feature can be used in the app.

By converting image to text, we can automate the process of extracting text from images and save a lot of time and effort.