Create a blank ASP.NET Core Web application.

Compile the project for restoring dependencies using 'npm'.

Client side: Delete files, which are not necessary in this demo.

• Delete directories "ClientApp\src\app\counter\", "ClientApp\src\app\fetch-data\", "ClientApp\src\app\home\", "ClientApp\src\app\nav-menu\" - these Angular components are not necessary in this demo.
• Open file "ClientApp\src\app\app.component.html" and delete line "<app-nav-menu></app-nav-menu>" from HTML markup - this demo does not need navigation menu.
• Open file "ClientApp\src\app\app.module.ts" and delete code that uses the following Angular components: NavMenuComponent, HomeComponent, CounterComponent, FetchDataComponent - these Angular components are not necessary in this demo.
  Here are source codes of "app.module.ts" file after update:
  
  • TYPESCRIPT

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { RouterModule } from '@angular/router';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
      HttpClientModule,
      FormsModule,
      RouterModule.forRoot([
      ])
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  
  

Client side: Add the installer of VintaSoft Web TWAIN service to ASP.NET Core Web application.

• Add "Data" folder inside "wwwroot" folder.
• Download the ZIP-archive with Windows installer of VintaSoft Web TWAIN service from URL https://www.vintasoft.com/zip/VintasoftWebTwainService-15.0.0.zip and copy the ZIP-archive to the folder "wwwroot\Data\".
  VintaSoft Web TWAIN service is a Windows service that provides Web API for accessing local TWAIN scanners for all users of local computer. More info about VintaSoft Web TWAIN service can be found here.

Client side: Add JavaScript files and TypeScript modules to the ASP.NET Core Web application.

• Add the "assets" folder to the "ClientApp\src\app\" folder.
• Get Vintasoft.Shared.js and Vintasoft.Twain.js files from "<SDK_install_path>\Bin\JavaScript\" folder of VintaSoft TWAIN .NET SDK installation or from npm-package 'vintasoft-web-twain-js'. Copy Vintasoft JavaScript files to the "ClientApp\src\app\assets\" folder.
  
• Set "Build Action" to the "TypeScript file" for Vintasoft.Shared.d.ts and Vintasoft.Twain.d.ts files:
  
• Add references to Vintasoft JavaScript files to the "projects => Demo => architect => build => options => scripts" section in "ClientApp\angular.json" file:
  • JSON

  ...
  "scripts": [
    "src/app/assets/Vintasoft.Shared.js",
    "src/app/assets/Vintasoft.Twain.js"
  ]
  ...
  

  
  

Client side: Create Angular component that acquires image from TWAIN scanner and displays the scanned image.

• Create the folder "ClientApp\src\app\twain-scanning-demo\".
  
  Create "twain-scanning-demo.component.html" file that will contain the HTML markup of Angular component:
  • Select "Add => New Item..." context menu for folder "ClientApp\src\app\twain-scanning-demo\" => "Add new item" dialog will appear
  • Select "HTML Page" type for the new item
  • Set "twain-scanning-demo.component.html" as element name
  • Click the "Add" button => dialog will be closed and file "twain-scanning-demo.component.html" will be added into folder "ClientApp\src\app\twain-scanning-demo\"
  
  Add HTML markup (demo header and image element that will display an image acquired from TWAIN scanner) to the "twain-scanning-demo.component.html" file:
  
  • HTML

  <div style="text-align:center">
    <h1>Angular TWAIN Scanning Demo</h1>
    <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 id="vintasoftWebTwainServiceInstallerLinkId" href="/Data/VintasoftWebTwainService-15.0.0.zip" hidden>Download installer of VintaSoft Web TWAIN service</a>
  </div>
  
  

  
  
  Create "twain-scanning-demo.component.ts" file that will contain the code of Angular component:
  • Select "Add => New Item..." context menu for folder "ClientApp\src\app\twain-scanning-demo\" => "Add new item" dialog will appear
  • Select "TypeScript File" type for new item
  • Set "twain-scanning-demo.component.ts" as element name
  • Click the "Add" button => dialog will be closed and file "twain-scanning-demo.component.ts" will be added into folder "ClientApp\src\app\twain-scanning-demo\"
  
  Add TypeScript code to the "twain-scanning-demo.component.cs" file:
  
  • TYPESCRIPT

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'twain-scanning-demo',
    templateUrl: './twain-scanning-demo.component.html'
  })
  export class TwainScanningDemoComponent {
  
    ngOnInit() {
      // acquire images from TWAIN/SANE scanner
      this.__acquireImageFromTwainScanner();
    }
  
  
    /**
    * Acquires images from TWAIN/SANE scanner.
    */
    __acquireImageFromTwainScanner() {
      // 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');
  
      // 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 and SANE devices
      let twainService: Vintasoft.Shared.WebServiceControllerJS = new Vintasoft.Shared.WebServiceControllerJS(serviceUrl);
  
      // TWAIN/SANE device manager
      let deviceManager: Vintasoft.Twain.WebTwainDeviceManagerJS = new Vintasoft.Twain.WebTwainDeviceManagerJS(twainService);
  
      // the default settings of device manager
      let deviceManagerInitSetting: Vintasoft.Twain.WebTwainDeviceManagerInitSettingsJS = new Vintasoft.Twain.WebTwainDeviceManagerInitSettingsJS();
  
      try {
        // open device manager
        deviceManager.open(deviceManagerInitSetting);
      }
      catch (ex) {
        if (ex.toString().startsWith('NetworkError')) {
          document.getElementById('vintasoftWebTwainServiceInstallerLinkId').hidden = false;
          alert("VintaSoft Web TWAIN service is not found.\n\nPlease close this dialog, link 'Download installer of VintaSoft Web TWAIN service' will appear at the top of this page, click the link, download VintaSoft Web TWAIN Service, manually install the service on your computer, reload this web page in web browser (Firefox must be restarted) and try to scan images once again.");
        }
        else
          alert(ex);
        return;
      }
  
      let device: Vintasoft.Twain.WebTwainDeviceJS = null;
      try {
        // get the default TWAIN/SANE device
        device = deviceManager.get_DefaultDevice();
        // open device without UI
        device.open(false);
  
        let acquireModalState: number;
        do {
          // do one step of modal image acquisition process
          let acquireModalResult: Vintasoft.Twain.WebTwainDeviceAcquireModalResultJS = device.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:   // image scan is failed
              alert(acquireModalResult.get_ErrorMessage());
              break;
            case 9:   // image scan is finished
              break;
          }
        }
        while (acquireModalState !== 0);
      }
      catch (ex) {
        alert(ex);
      }
      finally {
        if (device != null) {
          // close the device
          device.close();
        }
        // close the device manager
        deviceManager.close();
      }
    }
  
  }
  
  

  
  
  
• Add created Angular component to the Angular application module - "ClientApp\src\app\app.module.ts" file.
  
  
  Here are source codes of "app.module.ts" file after update:
  
  • TYPESCRIPT

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { RouterModule } from '@angular/router';
  
  import { AppComponent } from './app.component';
  import { TwainScanningDemoComponent } from './twain-scanning-demo/twain-scanning-demo.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      TwainScanningDemoComponent
    ],
    imports: [
      BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
      HttpClientModule,
      FormsModule,
      RouterModule.forRoot([
        { path: '', component: TwainScanningDemoComponent, pathMatch: 'full' },
      ])
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  
  

Run the ASP.NET Core Web application with Angular and see the result.

• 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