Acquire images from TWAIN scanner in Angular application

In This Topic

This tutorial shows how to create the new Angular application that allows to acquire images from TWAIN scanner.

Here are steps, which must be done:

Install Node.js and npm client to your computer.
- You need Node.js to create Angular application. Please install Node.js to your computer if Node.js is not installed on your computer.
- The Node.js installer will also install the npm client by default.
Create the new Angular application.
- Create the new Angular application using the following console command:
  - Console
  ng new web-twain-scanning-angular-tutorial
- Use the default settings for newly created application.
- Go to the created project directory using the following console command:
  - Console
  cd web-twain-scanning-angular-tutorial

Copy Vintasoft JS- and TS-files to Angular application.

Add the dependency to the npm-package 'vintasoft-web-twain-js' using the following console command:
- Console
```
npm install vintasoft-web-twain-js
```
Create the folder "src\app\assets" using the following console command:
- Console
```
mkdir src\app\assets
```
Copy Vintasoft.Shared.js, Vintasoft.Twain.js, Vintasoft.Shared.d.ts and Vintasoft.Twain.d.ts files from folder "node_modules\vintasoft-web-twain-js\dist\" to the folder "src\app\assets\".

Add references to Vintasoft JavaScript files to the "projects => vintasoft-web-twain-angular => architect => build => options => scripts" section in "angular.json" file:

JSON

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "web-twain-scanning-angular-tutorial": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/web-twain-scanning-angular-tutorial",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "src/app/assets/Vintasoft.Shared.js",
              "src/app/assets/Vintasoft.Twain.js"
            ]
          },
...

Create vintasoft-web-twain component in Angular application.

Add the new component to Angular application using the following console command:
- Console
```
ng generate component web-twain-scanning-angular-tutorial
```

Add HTML markup (an image element that will display the image acquired from TWAIN scanner) to the "src\app\web-twain-scanning-angular-tutorial.component.html" file:

HTML

<div style="text-align:center">
  <h1>Web TWAIN Scanning Tutorial for Angular</h1>
  <label for="twainDeviceList">TWAIN devices:</label>
  <select id="twainDeviceList"></select><br />
  <br />
  <input type="button" id="acquireImagesFromTwainDeviceButton" value="Acquire images from TWAIN device" disabled (click)="acquireImagesFromTwainDevice()" />

  <h3>Preview of scanned image</h3>
  <input type="image" id="previewImage" alt="Preview of scanned image" style="border:1px solid black; width:350px; height:350px" />
  <br />
  <br />
  <a href="https://www.vintasoft.com/docs/vstwain-dotnet-web/Licensing-Twain_Web-Evaluation.html" target="_blank">Read how to get the evaluation license</a><br />
  <a href="/assets/VSWebTwainService15.1.0.zip">Download installer of VintaSoft Web TWAIN service</a><br />
</div>

Add TypeScript code, which acquires an image from TWAIN scanner and displays the scanned image, to the "src\app\web-twain-scanning-angular-tutorial.component.ts" file:

TYPESCRIPT

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

@Component({
  selector: 'app-web-twain-scanning-angular-tutorial',
  templateUrl: './web-twain-scanning-angular-tutorial.component.html',
  styleUrls: ['./web-twain-scanning-angular-tutorial.component.css']
})
export class WebTwainScanningAngularTutorialComponent {

  constructor() {
  }



  ngOnInit() {
    // acquire images from TWAIN scanner
    this.getTwainDeviceList();
  }


  /**
  * Acquires images from TWAIN scanner.
  */
  getTwainDeviceList() {
    this.__registerVintasoftWebTwainService();

    let twainDeviceManager: Vintasoft.Twain.WebTwainDeviceManagerJS | null = this.__openTwainDeviceManager();
    if (twainDeviceManager == null)
      return;

    let twainDeviceListSelectElement: HTMLSelectElement = document.getElementById('twainDeviceList') as HTMLSelectElement;
    // clear the device list
    twainDeviceListSelectElement.options.length = 0;

    let twainDevices: Vintasoft.Twain.WebTwainDeviceJS[] | null = null;
    let twainDevice: Vintasoft.Twain.WebTwainDeviceJS | null = null;
    try {
      // get an array of available TWAIN devices
      twainDevices = twainDeviceManager.get_Devices();

      // get the default TWAIN device
      twainDevice = twainDeviceManager.get_DefaultDevice();

      // for each TWAIN device
      for (var i = 0; i < twainDevices.length; i++) {
          // add the device info to the device list
          twainDeviceListSelectElement.options.length = twainDeviceListSelectElement.options.length + 1;
          twainDeviceListSelectElement.options[i].text = twainDevices[i].get_DeviceName();
          // if device is default device
          if (twainDevices[i].get_DeviceName() === twainDevice.get_DeviceName())
              // select device in device selection element
              twainDeviceListSelectElement.options[i].selected = true;
      }

      if (twainDevices.length > 0) {
        let acquireImagesFromTwainDeviceButton: HTMLButtonElement = document.getElementById("acquireImagesFromTwainDeviceButton") as HTMLButtonElement;
        acquireImagesFromTwainDeviceButton.disabled = false;
      }
    }
    catch (ex) {
      alert(ex);
    }
    finally {
      if (twainDevice != null) {
        // close the device
        twainDevice.close();
      }
      // close the device manager
      twainDeviceManager.close();
    }
  }

  acquireImagesFromTwainDevice() {
    let acquireImagesFromTwainDeviceButton: HTMLButtonElement = document.getElementById("acquireImagesFromTwainDeviceButton") as HTMLButtonElement;
    acquireImagesFromTwainDeviceButton.disabled = true;

    let twainDeviceListSelectElement: HTMLSelectElement = document.getElementById('twainDeviceList') as HTMLSelectElement;
    let twainDeviceIndex: number = twainDeviceListSelectElement.selectedIndex;
    // if TWAIN device manager does not have TWAIN devices
    if (twainDeviceIndex == -1) {
      alert('TWAIN device manager does not have TWAIN devices.');
      acquireImagesFromTwainDeviceButton.disabled = false;
      return;
    }

    var twainDeviceName = twainDeviceListSelectElement.value;
    if (twainDeviceName == null) {
      alert('TWAIN device name is not found.');
      acquireImagesFromTwainDeviceButton.disabled = false;
      return;
    }

    this.__registerVintasoftWebTwainService();

    let twainDeviceManager: Vintasoft.Twain.WebTwainDeviceManagerJS | null = this.__openTwainDeviceManager();
    if (twainDeviceManager == null) {
      alert('TWAIN device manager is not found.');
      acquireImagesFromTwainDeviceButton.disabled = false;
      return;
    }

    let twainDevices: Vintasoft.Twain.WebTwainDeviceJS[] | null = null;
    let twainDevice: Vintasoft.Twain.WebTwainDeviceJS | null = null;
    try {
      // get an array of available TWAIN devices
      twainDevices = twainDeviceManager.get_Devices();

      // for each TWAIN device
      for (var i = 0; i < twainDevices.length; i++) {
          if (twainDevices[i].get_DeviceName() === twainDeviceName)
              twainDevice = twainDevices[i];
      }

      if (twainDevice == null) {
        alert('TWAIN device is not found.');
        acquireImagesFromTwainDeviceButton.disabled = false;
        return;
      }

      // open TWAIN device (do not display device UI but display dialog with image scanning progress)
      twainDevice.open(false, true);

      let acquireModalState: number;
      do {
        // do one step of modal image acquisition process
        let acquireModalResult: Vintasoft.Twain.WebTwainDeviceAcquireModalResultJS = twainDevice.acquireModalSync();
        // get state of image acquisition
        acquireModalState = acquireModalResult.get_AcquireModalState().valueOf() as number;

        switch (acquireModalState) {
          case 2:   // image is acquired
            // get acquired image
            let acquiredImage: Vintasoft.Twain.WebAcquiredImageJS = acquireModalResult.get_AcquiredImage();
            // get image as Base64 string
            let bitmapAsBase64String: string = acquiredImage.getAsBase64String();
            // update image preview
            let previewImageElement: HTMLImageElement = document.getElementById('previewImage') as HTMLImageElement;
            previewImageElement.src = bitmapAsBase64String;
            break;
          case 4:   // scan is failed
            alert(acquireModalResult.get_ErrorMessage());
            break;
          case 9:   // scan is finished
            break;
        }
      }
      while (acquireModalState !== 0);
    }
    catch (ex) {
      alert(ex);
    }
    finally {
      acquireImagesFromTwainDeviceButton.disabled = false;
      if (twainDevice != null) {
        // close the device
        twainDevice.close();
      }
      // close the device manager
      twainDeviceManager.close();
    }
  }

  __registerVintasoftWebTwainService() {
    // register the evaluation version of VintaSoft Web TWAIN service
    // please read how to get evaluation license in documentation: https://www.vintasoft.com/docs/vstwain-dotnet-web/Licensing-Twain_Web-Evaluation.html
    Vintasoft.Twain.WebTwainGlobalSettingsJS.register('REG_USER', 'REG_URL', 'REG_CODE', 'EXPIRATION_DATE');
  }

  __openTwainDeviceManager(): Vintasoft.Twain.WebTwainDeviceManagerJS | null {
    // URL to the VintaSoft Web TWAIN service
    let serviceUrl: string = 'https://localhost:25329/api/VintasoftTwainApi';
    // a Web API controller that allows to work with TWAIN devices
    let twainService: Vintasoft.Shared.WebServiceControllerJS = new Vintasoft.Shared.WebServiceControllerJS(serviceUrl);

    // TWAIN device manager
    let twainDeviceManager: Vintasoft.Twain.WebTwainDeviceManagerJS = new Vintasoft.Twain.WebTwainDeviceManagerJS(twainService);

    // the default settings of TWAIN device manager
    let deviceManagerInitSetting: Vintasoft.Twain.WebTwainDeviceManagerInitSettingsJS = new Vintasoft.Twain.WebTwainDeviceManagerInitSettingsJS();

    try {
      // open TWAIN device manager
      twainDeviceManager.open(deviceManagerInitSetting);
    }
    catch (ex) {
      alert(ex);
      return null;
    }
    return twainDeviceManager;
  }

}

Read how to get the evaluation license for VintaSoft TWAIN .NET SDK here https://www.vintasoft.com/docs/vstwain-dotnet-web/Licensing-Twain_Web-Evaluation.html and get the evaluation license.
Embed TypeScript code with your evaluation license instead of code line "Vintasoft.Twain.WebTwainGlobalSettingsJS.register('REG_USER', 'REG_URL', 'REG_CODE', 'EXPIRATION_DATE');" in vintasoft-web-twain.component.ts file.
Specify that Angular application must open "web-twain-scanning-angular-tutorial" component. For doing this please change HTML code of "src\app.component.html" file to the following HTML code:
- HTML
```
<app-web-twain-scanning-angular-tutorial></app-web-twain-scanning-angular-tutorial>
```

Run the Angular application and see the result.
Run the Angular application using the following console command:
- Console
```
ng serve -o
```
If VintaSoft Web TWAIN service is installed on your computer, you will see the following result:

If VintaSoft Web TWAIN service is not installed on your computer (you see an alert with error message), you should do the following steps:
- click the "Download installer of VintaSoft Web TWAIN service" link
- download the installer of VintaSoft Web TWAIN service to your computer
- install the VintaSoft Web TWAIN service to your computer
- reload the application page in web browser

The ready-to-use project from this tutorial can be downloaded from Github: https://github.com/vintasoft/web-twain-scanning-angular-tutorial.

Send Feedback

Install Node.js and npm client to your computer.

Create the new Angular application.

Copy Vintasoft JS- and TS-files to Angular application.

Create vintasoft-web-twain component in Angular application.

Run the Angular application and see the result.