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

转载

roffey 2020-08-25 14:02:04

文章标签 Dynamic Web TWAIN Polymer Shadow DOM Web 文章分类 Java 后端开发

过去，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 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>

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元素：