VintaSoft Twain .NET SDK 15.0: Documentation for Web developer
In This Topic
    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:
    1. 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.

    2. Create the new Angular application.

      • Create the new Angular application using the following console command:
        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:
        cd web-twain-scanning-angular-tutorial
        
    3. 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:
        npm install vintasoft-web-twain-js
        
      • Create the folder "src\app\assets" using the following console command:
        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:
        {
          "$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"
                    ]
                  },
        ...
        
    4. Create vintasoft-web-twain component in Angular application.

      • Add the new component to Angular application using the following console command:
        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:
        <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="https://www.vintasoft.com/zip/VintasoftWebTwainService-15.0.1.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:
        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:
        <app-web-twain-scanning-angular-tutorial></app-web-twain-scanning-angular-tutorial>
        

    5. Run the Angular application and see the result.

      Run the Angular application using the following console command:
      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.