Building Web Document Scanning Apps with Polymer and Shadow DOM

Apr 14, 2024

 Document Scanning

•  DOCUMENT SCANNING
•  WEB TWAIN
•  POLYMER
•  SHADOW DOM
•  JAVASCRIPT

Shadow DOM is a web standard designed to encapsulate HTML and CSS into web components. It allows for the creation of separate DOM trees and specifies how these trees interact with each other in a document. Polymer is a library developed by Google to make it easier to create reusable web components. It utilizes Shadow DOM as a core part of its architecture. This article shares how to integrate Dynamic Web TWAIN into a Polymer project for implementing document scanning functions in web browsers.

Prerequisites

• Polymer CLI:

    npm i -g polymer-cli
  

• Dynamic Web TWAIN License key

Steps to Build a Web Document Scanning App with Polymer and Dynamic Web TWAIN

1. Scaffold a Polymer project:

    mkdir polymer-document-scan
    cd polymer-document-scan
    polymer init polymer-3-starter-kit
    npm start
   

   

2. In the project directory, install the Dynamic Web TWAIN SDK:

    npm install dwt
   

3. Include the Dynamic Web TWAIN JavaScript library in the index.html file:

    <script src="node_modules/dwt/dist/dynamsoft.webtwain.min.js"></script>
   

4. Add a div element and a button element to the HTML template in src/my-view1.js:

    class MyView1 extends PolymerElement {
      MyView1() {
        this.dwtObj;
        this.deviceList = [];
      }
      static get template() {
        return html`
          <style include="shared-styles">
            :host {
              display: block;
       
              padding: 10px;
            }
          </style>
       
          <div class="card">
            <h1>Web Document Scan</h1>
            <select size="1" id="source" style="position: relative; width: 220px;"></select>
            <div id="dwtcontrolContainer"></div>
            <button on-click="handleClick">scan</button>
          </div>
        `;
      }
        
      handleClick() {
        if (DWObject) {
             
        }
      }
    }
   

   • The div element with the ID dwtcontrolContainer is used to initialize the Dynamic Web TWAIN object.
   • The button element with the handleClick event triggers the document scanning process.

5. Instantiate a Dynamic Web TWAIN object with a valid license key and the div element in the ready() method:

    ready() {
        super.ready();
        // TODO: initialization
        this.initializeDWT();
      }
       
      initializeDWT() {
        if (Dynamsoft) {
          Dynamsoft.DWT.AutoLoad = true;
          Dynamsoft.DWT.UseLocalService = true;
          // https://www.dynamsoft.com/customer/license/trialLicense/?product=dcv&package=cross-platform
          Dynamsoft.DWT.ProductKey = 'LICENSE-KEY';
          Dynamsoft.DWT.ResourcesPath = 'node_modules/dwt/dist/';
          Dynamsoft.DWT.CreateDWTObjectEx({ WebTwainId: 'Viewer' }, (obj) => {
            this.dwtObj = obj;
            obj.Viewer.bind(this.shadowRoot.querySelector('#dwtcontrolContainer'));
            obj.Viewer.width = 560;
            obj.Viewer.height = 600;
            obj.Viewer.show();
       
            let select = this.shadowRoot.querySelector('#source');
            let deviceList = this.deviceList = [];
            obj.GetDevicesAsync().then(function (devices) {
              for (var i = 0; i < devices.length; i++) {
                let option = document.createElement('option');
                option.value = devices[i].displayName;
                option.text = devices[i].displayName;
                deviceList.push(devices[i]);
                select.appendChild(option);
              }
            }).catch(function (exp) {
              alert(exp.message);
            });
       
          }, function (e) {
            console.log(e)
          });
        }
      }
   

   Note: You must set the ResourcesPath to the path where the Dynamic Web TWAIN resources are located. The CreateDWTObjectEx method creates a Dynamic Web TWAIN object. The bindmethod binds the object to the div element. The GetDevicesAsync method is used to retrieve the list of available devices.

6. Implement the handleClick method to trigger the document scanning process:

    handleClick() {
        var obj = this.dwtObj;
        if (obj) {
          obj.SelectDeviceAsync(this.deviceList[this.shadowRoot.querySelector('#source').selectedIndex]).then(function () {
            return obj.AcquireImageAsync({
              IfShowUI: false,
              IfCloseSourceAfterAcquire: true
            });
          }).catch(function (exp) {
            alert(exp.message);
          });
        }
      }
   

7. Run the Polymer project:

    npm start
   

   Open a web browser and navigate to http://localhost:8081/ to see the document scanning app implemented in Polymer.

   

Source Code

https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/polymer