为什么Polymer无法与Dynamic Web TWAIN一起使用？-控件新闻-慧都网

为什么Polymer无法与Dynamic Web TWAIN一起使用？

翻译|使用教程|编辑：莫成敏|2019-12-24 16:09:39.197|阅读 232 次

概述：本文描述了为什么Dynamic Web TWAIN与Polymer无法一起使用。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

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试用版免费体验~

想要购买产品正版授权，或了解更多产品信息请点击