HOW TO EXTRACT TEXT FROM IMAGE USING Angular(OCR with Tesseract.js / OCR using Angular)?
If you are working in project for extracting text from images then you are in right place.
- EXTRACT TEXT FROM IMAGE USING Angular
- OCR with Tesseract.js
- OCR using Angular
We will be using Angular CLI for this article. We need to install NodeJS JavaScript runtime and NodeJS package manager (npm) for using command line interface as well as run Angualr application server. For downloading NodeJS click here.
Test whether installation is complete or not use following command:
node –-version
npm –-version
In Command-Line, to install Angular CLI:
npm install -g @angular/cli
It will take some time to install. After that enter following command to create angular app:
ng new ocrAngular
Output:
Now, to test whether the app is working or not you need to run following command:
>cd ocrAngular
>ng serve
output:
You will see http://localhost:4200/ like so copy it and paste it into browser.
To open your app into Visual Studio code you can use:
>cd ocrAngular
>code .
Output:
Let’s start modifying the app we just create. At first open Index.html file and modify it.
Create Images folder in assets folder and keep image on it.
Add script tesseract.js url in <head> </head> of Index.html file.
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
Now, open app.component.html file inside app folder. Add following code on it.
<img src="assets/Images/TestDemo.png" width="50%" />
<h2>Result: </h2>
<p>
{{ Result }}
</p>
</div>
App.component.html
Now open app.components.ts file. First declare variable Tesseract above @Component. Create function Test() inside AppComponent and add following code.
export class AppComponent {
title = 'ocrAngular';
Result = 'Recognizing...';
constructor() {
this. test();
}
test(){
Tesseract.recognize('assets/Images/TestDemo.png').then(function(result){
alert(result.text);
});
}
}
App.components.ts
Now click on Terminal of Visual Studio Code and click on New Terminal.
Run command:
>ng serve
Output:
Output on browser:
To Learn more about Angular Click here.
Also Read:
