Dynamic Web TWAIN Programming for Angular, React and Vue

Angular, React and Vue is the top three of the most wanted frameworks for web development according to the statistics of StackOverflow survey 2019. Each of them has their hardcore fans. No matter which web framework you like, you can benefit from the article, in which we demystify how to integrate Dynamic Web TWAIN SDK into these web frameworks. Our ultimate goal is to help developers build enterprise-grade web document scanning and management apps.

What is Dynamic Web TWAIN?

Dynamic Web TWAIN is a browser-based document scanning SDK specifically designed for web applications. It is a cross-platform SDK which supports Windows, Linux, and macOS.

With just a few lines of JavaScript code, developers can easily integrate robust document scanning into web applications. In addition to document scan, Dynamic Web TWAIN features image editing, saving, uploading and etc.

Download

Dynamic Web TWAIN SDK Installer v15.0.

Developer’s Guide

https://www.dynamsoft.com/docs/dwt/index.html

API Documentation

https://www.dynamsoft.com/docs/dwt/API/API-Index.html

Code Gallery

https://www.dynamsoft.com/Downloads/WebTWAIN-Sample-Download.aspx

Dynamic Web TWAIN for Angular

Install Angular CLI globally via command line tool:

npm install -g @angular/cli

Install Dynamic Web TWAIN and corresponding TypeScript definitions:

npm install dwt @types/dwt --save

Create a new project:

ng new web-document-scan

The first step is to change the UI. Open src\app\app.component.html and replace the default code with:

<button (click)="acquireImage()">Scan Document</button>
<div id="dwtcontrolContainer"></div>

The implementation of the button click event is in src\app\app.component.ts.

Import interface OnInit:

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

Override the callback method ngOnInit() defined by OnInit:

export class AppComponent implements OnInit {
  title = 'web-document-scan';
  DWObject: WebTwain;
  ngOnInit() {
    
  }
}

Set up and initialize the environment of Dynamic Web TWAIN in ngOnInit(). A valid trial license is required.

ngOnInit() {
    Dynamsoft.WebTwainEnv.AutoLoad = false;
    Dynamsoft.WebTwainEnv.Containers = [{ ContainerId: 'dwtcontrolContainer', Width: '583px', Height: '513px' }];
    Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', () => { this.Dynamsoft_OnReady(); });
    Dynamsoft.WebTwainEnv.Trial = true;
    Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";  
    Dynamsoft.WebTwainEnv.Load();
  }

Dynamsoft_OnReady(): void {
    this.DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    this.DWObject.IfShowUI = false;
  }

Get a FREE 30-day trial license and use it as follows:

Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";

Add the function acquireImage() bound to the UI button:

acquireImage(): void {
    if (this.DWObject.SelectSource()) {
      const onAcquireImageSuccess = () => { this.DWObject.CloseSource(); };
      const onAcquireImageFailure = onAcquireImageSuccess;
      this.DWObject.OpenSource();
      this.DWObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
    }
  }

Run the Angular app:

ng serve –open

Source Code

https://github.com/dynamsoft-dwt/angular-cli-application

Dynamic Web TWAIN for React

Install Dynamic Web TWAIN:

npm install dwt @types/dwt --save

Create a React project using npx:

npx create-react-app web-document-scan

Create a new class WebTwain and save it as a WebTwain.js file.

import React, { Component } from 'react';
import './WebTwain.css';
import Dynamsoft from 'dwt';

export class WebTwain extends Component {
  constructor(props) {
    super(props);

    Dynamsoft.WebTwainEnv.AutoLoad = false;
    Dynamsoft.WebTwainEnv.Trial = true;
    Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";
  }

  loadDWT() {
    Dynamsoft.WebTwainEnv.Load();
  }

  handleClick() {
    var dwObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    if (dwObject) {
      var bSelected = dwObject.SelectSource();
      if (bSelected) {
        var onAcquireImageSuccess = function () { dwObject.CloseSource(); };
        var onAcquireImageFailure = onAcquireImageSuccess;
        dwObject.OpenSource();
        dwObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
      }
    } else {
      alert("Please press 'Load DWT' first!");
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.loadDWT}>Load DWT</button><span>   </span>
        <button onClick={this.handleClick}>Scan Document</button>
        <div id="dwtcontrolContainer"></div>
      </div>
    );
  }
}

Get a FREE 30-day trial license and use it as follows:

Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";

Add the custom React component WebTwain to src\App.js file:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {WebTwain} from './WebTwain';

function App() {
    return (
      <div className="App">
        <h2>Dynamic Web TWAIN with React</h2>
        <WebTwain/>
      </div>
    );
}

export default App;

Run the React app:

npm start

Source Code

https://github.com/dynamsoft-dwt/react

Dynamic Web TWAIN for Vue

Install Vue CLI and Dynamic Web TWAIN:

npm install -g @vue/cli
npm install dwt @types/dwt --save

Create a project:

vue create web-document-scan

Replace the default HelloWorld component with dwt component in src\App.vue:

<template>
  <div id="app">
    <dwt/>
  </div>
</template>

<script>
import dwt from "./components/dwt.vue";

export default {
  name: "app",
  components: {
    dwt
  },
};
</script>

Create a dwt.vue file under src\components folder.

<template>
  <div id="DWTcontainer" class="container">
    <button id="btnScan" @click="acquireImage()">Scan</button>
    <div id="dwtcontrolContainer"></div>
  </div>
</template>

<script>
import Dynamsoft from "dwt";

export default {
  name: "dwt",
  data() {
    return {
      title: "Using Dynamic Web TWAIN in Vue Project",
      DWObject: false
    };
  },
  created() {
    Dynamsoft.WebTwainEnv.AutoLoad = false;
    Dynamsoft.WebTwainEnv.ProductKey ="LICENSE-KEY";
    Dynamsoft.WebTwainEnv.Containers = [
      { ContainerId: "dwtcontrolContainer", Width: "583px", Height: "513px" }
    ];
    Dynamsoft.WebTwainEnv.RegisterEvent("OnWebTwainReady", () => {
      this.Dynamsoft_OnReady();
    });
  },
  mounted() {
    Dynamsoft.WebTwainEnv.Load();
  },
  methods: {
    Dynamsoft_OnReady() {
      this.DWObject = Dynamsoft.WebTwainEnv.GetWebTwain("dwtcontrolContainer");
    },

    // Acquire Image
    acquireImage() {
      this.DWObject.IfDisableSourceAfterAcquire = true;
      this.DWObject.AcquireImage();
    }
  }
};
</script>

<style>
#dwtcontrolContainer > div {
    margin: 0 auto;
} 
</style>

Get a FREE 30-day trial license and use it as follows:

Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";

Run the Vue app:

npm run serve

Source Code

https://github.com/dynamsoft-dwt/vue-simple-document-scan

Technical Support

If you have any questions about how to use Dynamic Web TWAIN SDK, please feel free to contact support@dynamsoft.com.

Release History

15.0 (06/27/2019)

NEW

• [HTML5 | Windows] Added a new method startScan which accepts a JSON object that specifies all the scan parameters. This makes it simpler and even faster to initiate a scan job. At the same time, you can specify how you want the scanned data to be processed by adding extra output parameters in the same JSON object.
• [HTML5 | Windows] Added a new event OnPostTransferAync as the asynchronous counterpart to the existing synchronous event OnPostTransfer. Information about the transferred image is returned in the event listener.
• [HTML5 | Windows] Added a new PDF core DLL as the default engine for PDF encoding & decoding. This new PDF DLL has added support for JPEG2000 and JBIG2 compression types.
• [HTML5 | Windows] Added a new method PDF.Write.Setup which accepts a JSON object that contains all the parameters needed for creating PDF files.
• [HTML5 | Mac] Added a new file libDynamicImg.dylib to the macOS edition which provides functionalities equal to those provided by the file DynamicImage.dll on Windows. Essentially, this file offers better image encoding and decoding.
• [HTML5] Added a pair of methods IndexToImageID and ImageIDToIndex which converts the index of an image to its image id or vice versa. The id of an image is an unique number that can be used to specify the image.
• [HTML5] Added a new event OnIndexChangeDragDropDone which is triggered when you drag and drop images to resort them in the viewer. The event returns the from and to indices for the operation.

  IMPROVED

• [HTML5] Improved the method AcquireImage by adding two more options IfGetImageInfo & IfGetExtImageInfoto its parameter optionalDeviceConfig which are true by default and means extra image info will be returned with each transferred image.
• [HTML5 | Windows] Improved the method SetFileXferInfo so that you can specify a naming pattern for the transferred images when the transfer mode is Disk File.
• [HTML5] Improved the performance of Dynamsoft Service by allowing two time-consuming operations to occur concurrently. The affected methods are ConvertToBlob, ConvertToBase64, GenerateURLForUploadedData as well as a few HTTP Upload methods.
• [HTML5] Improved service connecting efficiency by removing optional ports and use the same ports no matter it's 64bit service or 32bit. Also, during initialization, JavaScript will attempt to connect to the core scan module directly instead of connecting to the service first.
• [HTML5] Improved the functions ConvertToBase64, ConvertToBlob, GenerateURLForUploadData, HTTPUpload, HTTPUploadAllThroughPostAsMultiPageTIFF, HTTPUploadAllThroughPostAsPDF, HTTPUploadThroughPost, HTTPUploadThroughPostAsMultiPagePDF, HTTPUploadThroughPostAsMultiPageTIFF, HTTPUploadThroughPostEx so that the current indices of the images which were operated on in these methods are returned in the callback functions. This is due to the fact that the indices might have changed during these time-consuming operations.

  CHANGED

• [HTML5 | Windows] 64bit service has been made the default option on 64bit machines.

  FIXED

• [HTML5 | Windows] Fixed a bug where it takes too much time to load a network file in RDS-mode Chrome.
• [HTML5 | Windows] Fixed a bug where an unwanted black line may appear as the right edge of saved TIFF files.