日本卡一卡,亚洲色偷拍,97伦理电影院

如何使Dynamic Web TWAIN與Polymer Shadow DOM一起使用？

翻譯|使用教程|編輯：楊鵬連|2021-03-31 09:39:34.670|閱讀 221 次

概述：本文分享了如何將Dynamic Web TWAIN SDK集成到Polymer項目中，以便在Web瀏覽器中掃描文檔。

Dynamic Web TWAIN是一個專為Web應用程序設計的TWAIN掃描識別控件。你只需在TWAIN接口寫幾行代碼，就可以用兼容TWAIN的掃描儀掃描文檔或從數碼相機/采集卡中獲取圖像。然后用戶可以編輯圖像并將圖像保存為多種格式，用戶可保存圖像到遠程數據庫或者SharePoint。該TWAIN控件還支持上傳和處理本地圖像。

點擊下載Dynamic Web TWAIN正式版

過去，Dynamic Web TWAIN僅支持HTML DOM元素。某些基于Shadow DOM的Web框架（例如Polymer）無法與Dynamic Web TWAIN一起使用。從版本16.1開始，Dynamic Web TWAIN與Shadow DOM完全兼容。本文分享了如何將Dynamic Web TWAIN SDK集成到Polymer項目中，以便在Web瀏覽器中掃描文檔。

動態Web TWAIN快速入門

下載Dynamic Web TWAIN SDK。
復制** Dynamic Web TWAIN SDK \ Resources **文件夾到您的項目根目錄。
創建一個HTML文件并從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>

通過這些步驟，完成了一個簡單的Web文檔管理應用程序。如果沒有網絡服務器，我們可以通過雙擊HTML文件來立即運行網絡文檔掃描器應用程序。

要使應用正常運行，需要有效的許可證密鑰。獲得30天的免費試用許可證并更新代碼：

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

用于掃描文檔的聚合物項目

安裝Polymer CLI：

npm i -g polymer-cli

之后，我們可以使用模板初始化Polymer項目：

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

è???????©é?1??®

將Dynamic Web TWAIN集成到Polymer項目中

現在，讓我們通過在src / my-view.js中的HTML模板中添加Div元素和Button元素來修改默認UI ：

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

?°????????¨?????·??? ??°Polymeré?1??®

如果我們使用“ Hello World”示例代碼，它將無法初始化Dynamic Web TWAIN對象：

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

原因是找不到元素。要調查此問題，請打開開發人員控制臺。

開發者控制臺顯示Div元素是Shadow DOM的子元素。這是獲取Shadow DOM元素的JS代碼：

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

該代碼可以簡化如下：

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

由于Dynamic Web TWAIN支持Shadow DOM，因此我們可以使用以下bind()方法輕松地使用Shadow DOM元素初始化Dynamic Web TWAIN對象：

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

我們創建一個單擊事件以觸發文檔掃描。

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

最后，Polymer中實現的Web文檔掃描應用程序可以成功運行。

Polymer Shadow DOM?????￡??????