ng new web-twain-scanning-angular-tutorial

cd web-twain-scanning-angular-tutorial

npm install vintasoft-web-twain-js

mkdir src\app\assets

{
  "$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"
            ]
          },
...

ng generate component web-twain-scanning-angular-tutorial

<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.ru/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.5.1.zip">Download installer of VintaSoft Web TWAIN service</a><br />
</div>

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/WIA/eSCL image scanner
    this.getTwainDeviceList();
  }


  /**
  * Acquires images from TWAIN/WIA/eSCL 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 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.ru/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;
  }

}

<app-web-twain-scanning-angular-tutorial></app-web-twain-scanning-angular-tutorial>