Using Dynamic Web TWAIN in Angular Application

About Angular

Angular is a TypeScript-based open-source front-end web application platform. With Angular, you can build one application and reuse the code to build apps for any deployment – web, mobile web, native mobile or desktop.

In this article, we’ll talk about how to use Dynamic Web TWAIN, the web-based document scanning library, in an Angular application for online document scanning.

Environment

@angular/cli: 1.0.3
node: 7.9.0
os: win32 x64
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

Using Dynamic Web TWAIN with Angular

  1. Install Angular CLI, a command line interface for Angular, globally.
npm install -g @angular/cli
  1. Initialize an Angular project:
ng new web-scan-angular
  1. Install Dynamic Web TWAIN JavaScript library – dynamsoft.webtwain.min.js and TypeScript declaration file (.d.ts) for Dynamic Web TWAIN:
npm install dwt --save
npm install @types/dwt --save
  1. Include Dynamic Web TWAIN JavaScript library in the project.

Open .angular-cli.json and add the library path to scripts:

"scripts": ["../node_modules/dwt/dist/dynamsoft.webtwain.min.js"],

Alternatively, you can add the link to src/index.html:

<script type="text/javascript" src="http://www.dynamsoft.com/library/dwt/dynamsoft.webtwain.min.js"> </script>
  1. Add a function for document scanning in **src/app/app.component.ts**:
export class AppComponent {
  title = 'Using Dynamic Web TWAIN in Angular Project';
 
  acquireImage(): void {
    const dwObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    const bSelected = dwObject.SelectSource();
    if (bSelected) {
      const onAcquireImageSuccess = () => { dwObject.CloseSource(); };
      const onAcquireImageFailure = onAcquireImageSuccess;
      dwObject.OpenSource();
      dwObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
    }
  }
}
  1. Add a button and a div element for Dynamic Web TWAIN to src/app/app.component.html:
<button (click)="acquireImage()">Scan Document</button>
<div id="dwtcontrolContainer"></div>

Now let’s run the app:

ng serve --open

We can click ‘Scan’ to connect to a scanner and acquire documents in the browser.

web scan in Angular

Source Code

https://github.com/dynamsoft-dwt/angular-cli-application

You can also get a sample of document scanning and uploading in an Angular 5 application in our code gallery.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com