Use Web TWAIN in Angular

Angular is one of the most popular and mature JavaScript frameworks. Check out the following on how to implement Dynamic Web TWAIN into an Angular application.

Sample of dwt-angular-advanced

Preparation

Make sure you have node and Angular CLI installed. node 14.4.0 and Angular CLI 9.1.12 are used in the example below.

Create the sample project

Create an out-of-the-box raw Angular application

ng new dwt-angular

cd to the root directory of the application and install the dependencies

npm install dwt

Configure the project

Open angular.json and add the following lines to "build"/"options"/"assets" .

These lines will copy the static files necessary to run Dynamic Web TWAIN to the resulting project.

{
    "glob": "**/*",
    "input": "./node_modules/dwt/dist",
    "output": "assets/dwt-resources"
}

Start to implement

Generate a component

ng generate component dwt

Edit the component

In dwt.component.html add a button and a HTMLDIVElement .

<button (click)="acquireImage()">Acquire Images</button>
<div id="dwtcontrolContainer"></div>

In dwt.component.ts add code to initialize Dynamic Web TWAIN .

import Dynamsoft from 'dwt';

containerId = "dwtcontrolContainer";
ngOnInit(): void {
    Dynamsoft.DWT.Containers = [{
        WebTwainId: 'dwtObject',
        ContainerId: this.containerId,
        Width: '300px',
        Height: '400px'
    }];
    Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', () => {
        this.Dynamsoft_OnReady();
    });
    Dynamsoft.DWT.ProductKey = 'YOUR-PRODUCT-KEY';
    Dynamsoft.DWT.ResourcesPath = 'assets/dwt-resources';
    Dynamsoft.DWT.Load();
}

Note:

containerId specifies the HTMLDIVElement to create Dynamic Web TWAIN viewer in.

OnWebTwainReady is the callback triggered when the initialization succeeds.

ProductKey must be set to a valid trial or full key.

ResourcesPath is set to the location of the static files mentioned in Configure the project.

Get a handler of the WebTwain instance.

Use the method Dynamsoft.DWT.GetWebTwain() to get a handler of the created WebTwain instance.

import { WebTwain } from 'dwt/dist/types/WebTwain';

DWObject: WebTwain | any = null;
Dynamsoft_OnReady() {
    this.DWObject = Dynamsoft.DWT.GetWebTwain(this.containerId);
}

Define the function acquireImage() .

acquireImage() {
    if (this.DWObject) {
        this.DWObject.SelectSourceAsync()
        .then(() => {
            return this.DWObject.AcquireImageAsync({
                IfDisableSourceAfterAcquire: true,
            });
        })
        .then( (result) => {
            console.log(result);
        })
        .catch((exp) => {
            console.error(exp.message);
        })
        .finally(() => {
            this.DWObject.CloseSourceAsync().catch((e) => {
                console.error(e);
            });
        });
    }
}

Add the component to app.component.html .

Edit the file app.component.html to contain nothing but the following

<app-dwt></app-dwt>

Try running the project.

ng serve -o

If you have installed Dynamic Web TWAIN and have configured a valid ProductKey . You will have a working page to scan documents from your scanner now. Otherwise, you should see instructions on the page that guide you to install the library. More info».

Official Sample

Check out the following sample project:

dwt-angular-advanced