Building Web Document Scanning Apps with Polymer and Shadow DOM

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

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

    Polymer project

  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=dwt
       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.

    Polymer Shadow DOM document scan

Source Code

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