This will be a quick tutorial for “Document Scanner App with Ionic”. We’ll use the ionic framework to create a document scanner app. it can work with both capacitor and Cordova. You can check the final output here:-
Let’s Start Our Document Scanner App with Ionic
Before you go through this tutorial, you should have at least a basic understanding of Ionic Framework.
If you’re not familiar with Ionic Framework already, I’d recommend reading my How to install Ionic first for set up and running and understand the basic concepts.
Create a new ionic app
let’s create a new ionic app with the ionic start command:
$ ionic start myApp tabsAdd Document Scanner
In this tutorial we will go with ionic cordova combination. But if you like to use capacitor as the runtime for you application. You can use the capacitor plugin installation as well.
For CORDOVA Application
$ ionic cordova plugin add cordova-plugin-document-scanner
$ npm install @ionic-native/document-scannerFor CAPACITOR Application
If you want you use capacitor as your runtime environment for your ionic application. You can use the following steps for installing document scanner plugin for capacitor. If you don’t know how to connect capacitor with ionic. Then you can follow official documentation of capacitor for Using Capacitor with Ionic Framework
$ npm install cordova-plugin-document-scanner
$ npm install @ionic-native/document-scanner
$ ionic cap syncUpdate app.module.ts
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DocumentScanner } from '@ionic-native/document-scanner/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
DocumentScanner
],
bootstrap: [AppComponent]
})
export class AppModule {}Implementing the Code
Now we are done with the installation of document scanner plugin. So now we can use it anywhere in our application. We are going to implement in our tab1 page as following:
tab1.page.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Tab 1
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1</ion-title>
</ion-toolbar>
</ion-header>
<ion-button expand="block" (click)="openSccanner()">Open Sccanner</ion-button>
</ion-content>
tab1.page.ts
import { Component } from '@angular/core';
import { DocumentScanner, DocumentScannerOptions } from '@ionic-native/document-scanner/ngx';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
data:any;
constructor(private documentScanner: DocumentScanner) {}
openSccanner() {
let opts: DocumentScannerOptions = {};
this.documentScanner.scanDoc(opts)
.then((res: string) => {
console.log(res)
this.data = res;
})
.catch((error: any) => console.error(error));
}
}
Building Our Document Scanner App with Ionic
that’s it. we have now done all our coding part and now we are ready to build and test our ionic document scanner app. so now we are going to build our ionic app.
$ ionic cordova platform add android
$ ionic cordova prepare androidthis command will prepare android project for our document scanner app and we can open this project in Android Studio. The project folder is located in /platforms folder.
Conclusion
With the help of this plugin it’s actually not really hard to implement your own document scanner with Ionic.
If you wish to build your own document scanner with more advanced features. this guide should be a good place to start.
manpower drugs in nigeria https://www.fmohconnect.gov.ng/health_system.html
Hello this plugin in not working in Samsung devices. can you please help me how to resolved it.
Thanks.
can you please share the error log?
src_app_home_home_module_ts.js:116 Incorrect result or user canceled the action.
getting this error after clicking image and selecting tick option.
Je rencontre le même problem