logo

Dynamic Web TWAIN laten werken met Polymer Shadow DOM

In het verleden ondersteunde Dynamic Web TWAIN alleen HTML DOM-elementen. Sommige webframeworks op basis van Shadow DOM, zoals Polymer, konden niet werken met Dynamic Web TWAIN. Vanaf versie 16.1 was Dynamic Web TWAIN volledig compatibel met Shadow DOM. In dit artikel wordt uitgelegd hoe u Dynamic Web TWAIN SDK integreert in een Polymer-project voor het scannen van documenten in webbrowsers.

Snel aan de slag met Dynamic Web TWAIN

  1. Download Dynamic Web TWAIN SDK.

  2. Kopieer de Dynamic Web TWAIN SDK \Resources map naar de hoofdmap van uw project.

  3. Maak een HTML-bestand en haal de volledige voorbeeldcode op van GitHub:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
    <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
</head>
<body>
    <div id="dwtcontrolContainer" ></div>
    <input type="button" value="Scan" onclick="AcquireImage();" />
    <script type="text/javascript">
        Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";
        function AcquireImage() {
          var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
          if (DWObject) {       
            DWObject.SelectSource(function () {     
              var OnAcquireImageSuccess = OnAcquireImageFailure = function () {
                  DWObject.CloseSource();
              };
              DWObject.OpenSource();
              DWObject.IfDisableSourceAfterAcquire = true;
              DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
                      }, function () {
              console.log('SelectSource failed!');
                      });
          }
        }
    </script>
</body>
</html>

Met zo'n paar stappen is een eenvoudige app voor webdocumentbeheer klaar. Zonder een webserver kunnen we de app voor het scannen van webdocumenten onmiddellijk uitvoeren door op het HTML-bestand te dubbelklikken.

Een geldige licentiesleutel is vereist om de app te laten werken. Ontvang een GRATIS proeflicentie van 30 dagen en werk de code bij:

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

Een polymeerproject voor het scannen van documenten

Installeer de Polymer CLI:

npm i -g polymer-cli

Daarna kunnen we het Polymer-project initialiseren met een sjabloon:

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

Dynamic Web TWAIN integreren in Polymer Project

Laten we nu de standaard gebruikersinterface aanpassen door een Div . toe te voegen element en een Knop element toe aan de HTML-sjabloon in src/my-view.js: 

class MyView1 extends PolymerElement {
  static get template() {
    return html`
      <style include="shared-styles">
        :host {
          display: block;

          padding: 10px;
        }
      </style>

      <div class="card">
      <div id="dwtcontrolContainer"></div>
      <button on-click="handleClick">scan</button>
      </div>
    `;
  }

  handleClick() {
    if (DWObject) {

    }
  }
}

Het kan het Dynamic Web TWAIN-object niet initialiseren als we de code van het 'Hello World'-voorbeeld gebruiken:

var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');

De reden is dat het element niet kan worden gevonden. Open de ontwikkelaarsconsole om het probleem te onderzoeken.

De ontwikkelaarsconsole laat zien dat het Div-element een kind is van schaduw-DOM. Hier is de JS-code om het Shadow DOM-element te krijgen:

document.querySelector("body > my-app").shadowRoot.querySelector("app-drawer-layout > app-header-layout > iron-pages > my-view1").shadowRoot.querySelector("#dwtcontrolContainer")

Geen paniek. De code kan als volgt worden vereenvoudigd:

this.shadowRoot.querySelector('#dwtcontrolContainer');

Aangezien Dynamic Web TWAIN Shadow DOM heeft ondersteund, kunnen we het Dynamic Web TWAIN-object eenvoudig initialiseren met een Shadow DOM-element met behulp van de bind() methode:

ready() {
    super.ready();
    // TODO: initialization
    this.initializeDWT();
  }

  initializeDWT() {
    // Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";
    Dynamsoft.WebTwainEnv.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();

      var count = obj.SourceCount;
      for (var i = 0; i < count; i++) {
        this.shadowRoot.querySelector('#source').options.add(new Option(obj.GetSourceNameItems(i), i));
      }

    }, function (e) {
      console.log(e)
    });
  }

We creëren een klikgebeurtenis om het scannen van documenten te activeren. 

handleClick() {
    var obj = this.dwtObj;
    if (obj) {
      var onSuccess, onFailure;
      onSuccess = onFailure = function () {
        obj.CloseSource();
      };

      obj.SelectSourceByIndex(this.shadowRoot.querySelector('#source').selectedIndex); 
      obj.OpenSource();
      obj.IfDisableSourceAfterAcquire = true;   
      obj.AcquireImage(onSuccess, onFailure);
    }
  }

Ten slotte kan de in Polymer geïmplementeerde app voor het scannen van webdocumenten succesvol werken.

Broncode

https://github.com/yushulx/web-twain-document-scan