logo

Jak zajistit, aby dynamický web TWAIN fungoval s Polymer Shadow DOM

Dynamický web TWAIN v minulosti podporoval pouze prvky HTML DOM. Některé webové rámce založené na Shadow DOM, jako je Polymer, nemohly pracovat s Dynamic Web TWAIN. Počínaje verzí 16.1 byl Dynamic Web TWAIN plně kompatibilní s Shadow DOM. Tento článek uvádí, jak integrovat Dynamic Web TWAIN SDK do projektu Polymer pro skenování dokumentů ve webových prohlížečích.

Rychlý start Dynamic Web TWAIN

  1. Stáhněte si Dynamic Web TWAIN SDK.

  2. Zkopírujte Dynamic Web TWAIN SDK \Resources do kořenového adresáře projektu.

  3. Vytvořte soubor HTML a získejte úplný ukázkový kód z GitHubu:

<!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>

Pomocí těchto několika kroků je hotová jednoduchá aplikace pro správu webových dokumentů. Bez webového serveru můžeme okamžitě spustit aplikaci pro skenování webových dokumentů dvojitým kliknutím na soubor HTML.

Aby aplikace fungovala, je vyžadován platný licenční klíč. Získejte 30denní bezplatnou zkušební licenci a aktualizujte kód:

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

Polymerový projekt pro skenování dokumentů

Nainstalujte Polymer CLI:

npm i -g polymer-cli

Poté můžeme projekt Polymer inicializovat pomocí šablony:

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

Integrace Dynamic Web TWAIN do Polymer Project

Nyní upravme výchozí uživatelské rozhraní přidáním Div prvek a tlačítko prvek do šablony HTML v 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) {

    }
  }
}

Nepodaří se inicializovat objekt Dynamic Web TWAIN, pokud použijeme kód ukázky „Hello World“:

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

Důvodem je, že prvek nelze najít. Chcete-li problém prozkoumat, otevřete konzolu pro vývojáře.

Vývojářská konzole ukazuje, že prvek Div ​​je potomkem stínového DOM. Zde je kód JS pro získání prvku Shadow DOM:

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

Nepanikařte. Kód by se dal zjednodušit takto:

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

Protože Dynamic Web TWAIN podporuje Shadow DOM, můžeme objekt Dynamic Web TWAIN snadno inicializovat pomocí prvku Shadow DOM pomocí bind() metoda:

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)
    });
  }

Vytvoříme událost kliknutí pro spuštění skenování dokumentů. 

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);
    }
  }

Konečně, aplikace pro skenování webových dokumentů implementovaná v Polymeru může úspěšně fungovat.

Zdrojový kód

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