成人3D动漫一区二区在线播放,精品国产乱码一二,国产精品第一福利网站导航

為什么Polymer無法與Dynamic Web TWAIN一起使用？

翻譯|使用教程|編輯：莫成敏|2019-12-24 16:09:39.197|閱讀 219 次

概述：本文描述了為什么Dynamic Web TWAIN與Polymer無法一起使用。

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

點擊下載Dynamic Web TWAIN正式版

我注意到一些開發人員對于在Polymer（用于構建Web應用程序的開源JavaScript庫）項目中如何使用Dynamic Web TWAIN（DWT）SDK 感到困惑。到目前為止，答案是“不，你做不到”。在本文中，我將說明為什么它無法將Dynamic Web TWAIN與Polymer一起使用。

啟動Polymer項目

安裝Polymer CLI：

npm i -g polymer-cli

從模板初始化Polymer項目：

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

為什么Polymer無法與Dynamic Web TWAIN一起使用？

將Dynamic Web TWAIN集成到Polymer項目中

DWT“hello world”示例

讓我們看一下使用Dynamic Web TWAIN API掃描文檔的代碼片段：

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Web TWAIN</title>
    <script src="//unpkg.com/dwt@15.2.0/dist/dynamsoft.webtwain.min.js"></script> 
</head>
<body>
    <input type="button" value="Scan" onclick="AcquireImage();" />
    <div id="dwtcontrolContainer"></div>
  
    <script type="text/javascript">
        var DWObject;
        Dynamsoft.WebTwainEnv.ProductKey = 'LICENSE-KEY';
        Dynamsoft.WebTwainEnv.AutoLoad = true;
        Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);
        function Dynamsoft_OnReady() {
            DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
        }
        function AcquireImage() {
            if (DWObject) {
                DWObject.SelectSource(function () {
                    var OnAcquireImageSuccess, OnAcquireImageFailure;
                    OnAcquireImageSuccess = OnAcquireImageFailure = function () {
                        DWObject.CloseSource();
                    };
                    DWObject.OpenSource();
                    DWObject.IfDisableSourceAfterAcquire = true;
                    DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
                }, function () {
                    console.log('SelectSource failed!');
                });
            }
        }
    </script> 
</body>
</html>

這是屏幕截圖：

為什么Polymer無法與Dynamic Web TWAIN一起使用？

根據開發人員指南，Dynamic Web TWAIN將在HTML文檔中全局搜索<div id =” dwtcontrolContainer”> </ div>元素，并將其呈現為圖像查看器。初始化完成后，我們可以看到圖像查看器的邊界。

使用文檔掃描API來授權Polymer項目

下一步是將代碼移植到Polymer項目。

打開index.html以添加Dynamic Web TWAIN JS URL并設置相關屬性：

<my-app></my-app>
  <script src="//unpkg.com/dwt@15.2.0/dist/dynamsoft.webtwain.min.js"></script>
  <script type="text/javascript">
    var DWObject;
    Dynamsoft.WebTwainEnv.ProductKey = 'LICENSE-KEY';
    Dynamsoft.WebTwainEnv.AutoLoad = true;
    Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);
  </script>

在src / my-view.js中，添加<div>和<button>元素：

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() {
    var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    if (DWObject) {
      DWObject.SelectSource(function () {
          var OnAcquireImageSuccess, OnAcquireImageFailure;
          OnAcquireImageSuccess = OnAcquireImageFailure = function () {
              DWObject.CloseSource();
          };
          DWObject.OpenSource();
          DWObject.IfDisableSourceAfterAcquire = true;
          DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
      }, function () {
          console.log('SelectSource failed!');
      });
  }
  }
}

刷新主頁：

為什么Polymer無法與Dynamic Web TWAIN一起使用？

現在，您可以看到“掃描”按鈕，但是與基本DWT示例相比，沒有圖像查看器。

為DWT空異常調試Polymer代碼

按F12打開Chrome開發人員工具。單擊掃描按鈕以調試JavaScript代碼。

為什么Polymer無法與Dynamic Web TWAIN一起使用？

如上所示，DWObject的值為null。可能找不到dwtcontrolContainer。我們可以使用以下代碼驗證問題：

var element = document.getElementById('dwtcontrolContainer')

元素的值也為null。<div>元素在那里，為什么我們不能得到它？右鍵單擊UI元素以進行進一步檢查。

為什么Polymer無法與Dynamic Web TWAIN一起使用？

看到影子根了嗎？影子根是新陰影DOM的開始。我們不能使用getElementById（）函數來獲取由影子DOM封裝的元素。Chrome瀏覽器允許我們復制JS路徑。

為什么Polymer無法與Dynamic Web TWAIN一起使用？

獲取<div>元素的JavaScript代碼如下：

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

Polymer使用影子DOM來構建Web組件，而Dynamic Web TWAIN當前無法訪問該Web組件。如果Dynamic Web TWAIN可以支持使用HTML元素對象而不是ID初始化dwt控件容器，則可以解決該問題。

本文內容就是這樣了，感興趣的朋友可以繼續關注我們哦~您可以下載Dynamic Web TWAIN試用版免費體驗~

想要購買產品正版授權，或了解更多產品信息請點擊