翻譯|使用教程|編輯:莫成敏|2019-12-24 16:09:39.197|閱讀 219 次
概述:本文描述了為什么Dynamic Web TWAIN與Polymer無法一起使用。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Dynamic Web TWAIN是一個專為Web應用程序設計的TWAIN掃描識別控件。你只需在TWAIN接口寫幾行代碼,就可以用兼容TWAIN的掃描儀掃描文檔或從數碼相機/采集卡中獲取圖像。然后用戶可以編輯圖像并將圖像保存為多種格式,用戶可保存圖像到遠程數據庫或者SharePoint。這個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
將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>
這是屏幕截圖:
根據開發人員指南,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!'); }); } } }
刷新主頁:
現在,您可以看到“掃描”按鈕,但是與基本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控件容器,則可以解決該問題。
本文內容就是這樣了,感興趣的朋友可以繼續關注我們哦~您可以下載Dynamic Web TWAIN試用版免費體驗~
想要購買產品正版授權,或了解更多產品信息請點擊
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: