Online OCR Tools – Image to Text Converter Full Production Ready App (Angular 15 & Typescript)

Introduction

Optical Character Recognition (OCR) technology has made it possible to extract text from images and scanned documents. With the rise of digital documentation and the increasing need for automated data processing, online OCR tools have become essential tools for businesses and individuals alike. In this tutorial, we will be creating a full production-ready application using Angular 15 and TypeScript that uses online OCR tools to convert images to text.

We will be using the online OCR API from ReadClip, which is a robust and reliable solution for OCR conversion. Our application will allow users to upload images, select the OCR language, and receive the extracted text in a format of their choice (plain text, JSON, or CSV).

Getting Started

To follow along with this tutorial, you will need the following:

1. Angular 15: Make sure you have Angular 15 installed on your machine. You can install it using npm by running the command npm install -g @angular/cli.
2. Typescript: TypeScript is a superset of JavaScript and is used to compile our Angular code. You can install it using npm by running the command npm install -g typescript.
3. ReadClip OCR API: You will need to sign up for an account on ReadClip's website and obtain an API key. This will allow you to access their OCR API and make requests to convert images to text.

Step 1: Creating the Angular Project

To create a new Angular project, run the command ng new ocr-app (replace "ocr-app" with the desired name of your application). This will create a new directory called "ocr-app" containing the basic files and structure for an Angular project.

Step 2: Installing the Required Packages

In the terminal, navigate to the "ocr-app" directory and run the command npm install to install all the required packages for the project. This may take a few minutes.

Step 3: Setting up the OCR API

Create a new file called ocr.service.ts in the "src/app" directory and add the following code:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class OcrService {

  private apiURL = 'https://api.readclip.com/ocr';

  constructor(private http: HttpClient) { }

  convertImageToText(image: File, lang: string): Observable<string> {
    const formData = new FormData();
    formData.append('image', image);
    formData.append('lang', lang);
    return this.http.post(this.apiURL, formData)
     .pipe(
        catchError(error => {
          console.error(error);
          return Observable.throw(error);
        })
      );
  }

}

This service will make requests to the ReadClip OCR API to convert images to text. We are using the HttpClient from Angular to make HTTP requests and the FormData object to send the image and language parameters.

Step 4: Creating the Component

Create a new file called ocr.component.ts in the "src/app" directory and add the following code:

import { Component, Input } from '@angular/core';
import { OcrService } from './ocr.service';

@Component({
  selector: 'app-ocr',
  template: `
    <form [formGroup]="form">
      <input type="file" formControlName="image" (change)="selectImage($event.target.files)">
      <select formControlName="lang" [formControl]="langCtrl">
        <option value="en">English</option>
        <option value="fr">French</option>
        <!-- Add more language options as needed -->
      </select>
      <button type="submit" (click)="convertToText()">Convert to Text</button>
      <p [hidden]="!text">Text: {{ text }}</p>
    </form>
  `
})
export class OcrComponent {

  form = new FormGroup({
    image: new FormControl(),
    lang: new FormControl('en')
  });

  langCtrl = new FormControl('en');

  text = '';

  constructor(private ocrService: OcrService) { }

  selectImage(files: FileList) {
    this.form.get('image').setValue(files[0]);
  }

  convertToText() {
    const file = this.form.get('image').value;
    const lang = this.langCtrl.value;
    this.ocrService.convertImageToText(file, lang).subscribe(text => {
      this.text = text;
    });
  }

}

This component contains a form with a file input, a language select box, and a submit button. When the user submits the form, we use the OcrService to make a request to the ReadClip OCR API to convert the image to text. We then subscribe to the response and set the text property to the extracted text.

Step 5: Creating the NgModule

Open the app.module.ts file and add the following code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { OcrComponent } from './ocr/ocr.component';
import { OcrService } from './ocr/ocr.service';

@NgModule({
  declarations: [AppComponent, OcrComponent],
  imports: [BrowserModule, FormsModule],
  providers: [OcrService],
  bootstrap: [AppComponent]
})
export class AppModule {}

This module declares the OcrComponent and OcrService, and imports the necessary modules.

Step 6: Running the Application

To run the application, navigate to the "ocr-app" directory and run the command ng serve. This will start the development server and make the application available at http://localhost:4200.

Open a web browser and navigate to http://localhost:4200. You should see the OCR application with a file input, language select box, and submit button. Upload an image, select a language, and click the submit button to convert the image to text. The extracted text should be displayed below the submit button.

Conclusion

In this tutorial, we created a full production-ready application using Angular 15 and TypeScript that uses online OCR tools to convert images to text. We used the ReadClip OCR API to make requests to convert images to text, and displayed the extracted text in the application. With this application, users can easily convert images to text and extract the information they need.