Dynamic Web TWAIN正式版
启动Polymer项目
安装Polymer CLI：
npm i -g polymer-cli
从模板初始化Polymer项目：
mkdir polymer-scancd polymer-scanpolymer init polymer-3-starter-kitnpm start
将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>
这是屏幕截图：
根据开发人员指南，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!'); }); } }}
刷新主页：
现在，您可以看到“扫描”按钮，但是与基本DWT示例相比，没有图像查看器。
为DWT空异常调试Polymer代码
按F12打开Chrome开发人员工具。单击扫描按钮以调试JavaScript代码。
如上所示，DWObject的值为null。可能找不到dwtcontrolContainer。我们可以使用以下代码验证问题：
var element = document.getElementById('dwtcontrolContainer')
元素的值也为null。<div>元素在那里，为什么我们不能得到它键单击UI元素以进行进一步检查。
看到影子根了吗子根是新阴影DOM的开始。我们不能使用getElementById（）函数来获取由影子DOM封装的元素。Chrome浏览器允许我们复制JS路径。
获取<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控件容器，则可以解决该问题。
想要购买产品正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！