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

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

概述:本文描述了为什么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="https://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="https://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试用版免费体验~


想要购买产品正版授权,或了解更多产品信息请点击【咨询在线客服】

850×0.png



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Dynamsoft https://www.codepool.biz/polymer-dynamic-web-twain.html#more-6220

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Dynamic Web TWAIN

Dynamic Web TWAIN 应用于Web应用程序的TWAIN扫描识别工具,支持所有主流浏览器

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat