Acquire images from TWAIN/eSCL image scanner in Angular application

In This Topic

This tutorial shows how to create the new Angular application that allows to acquire images from TWAIN/eSCL image scanner in Windows.

Here are steps, which must be done:

Install Node.js and npm client to your computer.
- You need to create Angular application using Node.js. 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' (https://www.npmjs.com/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/eSCL image 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/VSWebTwainService-15.2.1.zip">Download installer of VintaSoft Web TWAIN service</a><br />
</div>

Add TypeScript code, which acquires an image from TWAIN/eSCL image 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 image scanner
    this.getTwainDeviceList();
  }


  /**
  * Acquires images from TWAIN image 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);

      // a collection that stores images, which are acquired from TWAIN/SANE devices and stored in memory of VintaSoft Web TWAIN service
      let acquiredImages: Vintasoft.Twain.WebAcquiredImageCollectionJS = new Vintasoft.Twain.WebAcquiredImageCollectionJS(twainDeviceManager);
      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();
            // add acquired image to the image collection
            acquiredImages.add(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;

            // clear image collection (delete images from memory of VintaSoft Web TWAIN service) because image is not necessary anymore
            acquiredImages.clear();
            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.