Dynamic Web TWAIN教程：如何使Dynamic Web TWAIN与Polymer Shadow DOM一起使用-控件新闻-慧都网

Dynamic Web TWAIN教程：如何使Dynamic Web TWAIN与Polymer Shadow DOM一起使用

翻译|使用教程|编辑：杨鹏连|2020-08-12 11:48:09.300|阅读 150 次

概述：在本文中，我将分享如何将Dynamic Web TWAIN SDK集成到Polymer项目中，以便在Web浏览器中扫描文档。

Dynamic Web TWAIN是一个专为Web应用程序设计的TWAIN扫描识别控件。你只需在TWAIN接口写几行代码，就可以用兼容TWAIN的扫描仪扫描文档或从数码相机/采集卡中获取图像。然后用户可以编辑图像并将图像保存为多种格式，用户可保存图像到远程数据库或者SharePoint。该TWAIN控件还支持上传和处理本地图像。

本文汇集了一些Dynamic Web TWAIN编程方面的常见问题，并且针对这些问题进行了回答，感兴趣的朋友快来了解一下吧~

点击下载Dynamic Web TWAIN正式版

过去，Dynamic Web TWAIN与HTML元素紧密相关。它仅允许开发人员使用HTML元素ID初始化图像容器。同时，不支持影子DOM元素，这导致Polymer项目失败。从最新版本16.1开始，SDK具有较低的耦合。开发人员可以使用HTML元素ID或HTML元素对象来初始化Dynamic Web TWAIN对象。在本文中，我将分享如何将Dynamic Web TWAIN SDK集成到Polymer项目中，以便在Web浏览器中扫描文档。

动态Web TWAIN快速入门

复制 Dynamic Web TWAIN SDK 16.1\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">
    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文件以运行Web扫描仪应用程序。

当您使用HTML元素ID初始化Dynamic Web TWAIN对象时，它将在内部使用DOM查找元素。但是，它不能与影子DOM一起使用。让我们用HTML元素对象代替ID作为预热：

<script type="text/javascript">
        // Get a free trial license key from //www.dynamsoft.com/CustomerPortal/Portal/Triallicense.aspx
        Dynamsoft.WebTwainEnv.ProductKey = 'LICENSE-KEY';
        Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', onReady);
        var DWObject;

        function onReady() {
            Dynamsoft.WebTwainEnv.CreateDWTObject(document.getElementById('doc-image'), function (obj) {
                DWObject = obj;
            }, function (errorString) {
                console.log(errorString)
            });
        }
    </script>

用于扫描文档的聚合物项目

安装Polymer CLI：

npm i -g polymer-cli

使用模板初始化Polymer项目并运行该项目：

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

将Dynamic Web TWAIN集成到Polymer项目中

在index.html文件中，我们在内存中创建一个HTML DIV元素以初始化Dynamic Web TWAIN对象：

<my-app></my-app>

  <script type="text/javascript">
    var DWObject;
    // Get a free trial license key from //www.dynamsoft.com/CustomerPortal/Portal/Triallicense.aspx
    // Dynamsoft.WebTwainEnv.ProductKey = 'LICENSE-KEY';
    Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', onReady);

    function onReady() {
      Dynamsoft.WebTwainEnv.CreateDWTObject(document.createElement('div'), function (obj) {
        DWObject = obj;
      }, function (errorString) {
        console.log(errorString)
      });
    }
  </script>

接下来，在src / my-view.js中的HTML模板中添加<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() {
    if (DWObject) {
      
    }
  }
}

刷新网页以检查效果：

我们如何扫描文档并将图像显示到DIV元素？如果打开开发者控制台，我们可以看到它是一个影子DOM元素：

获取元素的JS代码如下：

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

别害怕我们可以美化src / my-view.js中的代码：

let container = this.shadowRoot.querySelector('# dwtcontrolContainer');

要呈现文档，请在<div>元素中添加<img>元素：

<div class="card">
        <h1>Web Document Scan</h1>
        <div><img id="image"></div>
        <button on-click="handleClick">scan</button>
</div>

然后实现扫描和显示逻辑：

handleClick() {
    if (DWObject) {
      let image = this.shadowRoot.querySelector('#image');
      DWObject.SelectSource(function () {
          var onSuccess, onFailure;
          onSuccess = onFailure = function () {
              DWObject.CloseSource();
              image.src = DWObject.GetImageURL(DWObject.CurrentImageIndexInBuffer, 640, 480);
          };
          DWObject.OpenSource();
          DWObject.IfDisableSourceAfterAcquire = true;
          DWObject.AcquireImage(onSuccess, onFailure);
      }, function () {
          console.log('SelectSource failed!');
      });
    }

现在，Web文档扫描应用程序通常可以在Polymer项目中工作。