Ionic OCR Plugin : Scan Text from Image using Capacitor with Example

I started this directly from the OCR native plugin installation. I assume you already have Angular and Ionic setup’s in your project. Checkout here to complete the installation setup.

Install OCR Native Plugin

npm install cordova-plugin-mobile-ocr

npm install @ionic-native/ocr

ionic cap sync

Install Camera Native Plugin

We need any one plugin to choose the image from the storage to perform a scan. Here we can use any plugin for choosing images from storage like Image Picker, Camera etc… In this tutorial, I’m going to use the Camera Plugin.

npm install cordova-plugin-camera

npm install @ionic-native/camera

ionic cap sync

Implement Camera and OCR Plugin into Code with Example

Import the camera and ocr package in your app module and inject inside the component constructor.

import { Camera, PictureSourceType } from '@ionic-native/camera/ngx';

import { OCR, OCRSourceType, OCRResult } from '@ionic-native/ocr/ngx';

Just created two buttons for choosing an image and capturing the image using a camera plugin. Then created one space to show the captured text.

app.component.html :

<ion-header>

  <ion-title>

      Scan Text

  </ion-title>

</ion-header>

<ion-content>

  <div>

    <ion-img [src]="image" *ngIf="image"></ion-img>

    <div class="ion-text-center ion-padding-vertical">

      <ion-button (click)="getPicture(camera.PictureSourceType.PHOTOLIBRARY)">Choose Image</ion-button>

    </div>

    <div class="ion-text-center ion-padding-vertical" *ngIf="!image">

      <ion-button (click)="getPicture(camera.PictureSourceType.CAMERA)">Capture Image</ion-button>

    </div>

  </div>

  <div class="ion-text-center">

    <ion-button color="secondary" *ngIf="image && !ocrResult" (click)="recognizeText()">Capture Text</ion-button>

  </div>

  <div class="ion-padding-horizontal" *ngIf="ocrResult">

    <h2 style="font-weight: bold;">Captured Text :</h2>

    <p>{{ocrResult}}</p>

  </div>

</ion-content>

app.component.ts :

import { Component } from '@angular/core';

import { Capacitor } from '@capacitor/core';

import { Camera, PictureSourceType } from '@ionic-native/camera/ngx';

import { OCR, OCRSourceType, OCRResult } from '@ionic-native/ocr/ngx';

@Component({

  selector: 'app-root',

  templateUrl: 'app.component.html',

  styleUrls: ['app.component.scss'],

})

export class AppComponent {

  image: any = "";

  nativeImageURI: any;

  ocrResult: any = '';

  constructor(private camera: Camera, private noteService: NotesService) { }

  ionViewWillEnter() {

  }

  getPicture(sourceType: PictureSourceType) {

    this.camera.getPicture({

      quality: 50,

      destinationType: this.camera.DestinationType.FILE_URI,

      encodingType: this.camera.EncodingType.JPEG,

      sourceType: sourceType,

      saveToPhotoAlbum: false,

      correctOrientation: true

    }).then((imageData) => {

      this.nativeImageURI = imageData;

      this.image = Capacitor.convertFileSrc(imageData);

    });

  }

  recognizeText() {

    this.ocr.recText(OCRSourceType.NORMFILEURL, this.nativeImageURI).then((res: OCRResult) => {

      if (res.foundText) {

        let allBlocks = res.lines.linetext;

        let allLines = '';

        allBlocks.filter((text) => {

          allLines = allLines + text + "\n";

        })

        this.ocrResult = allLines;

      } else {

        this.ocrResult = "This image doesn't have any text.";

      }

    }).catch((error: any) => {

      console.log(error);

    });

  }

}

I hope it will be helpful for you to use OCR and Camera Plugin in your project. If you have any queries please hit me with a comment.