翻譯|使用教程|編輯:楊鵬連|2020-08-12 11:48:09.300|閱讀 235 次
概述:在本文中,我將分享如何將Dynamic Web TWAIN SDK集成到Polymer項目中,以便在Web瀏覽器中掃描文檔。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Dynamic Web TWAIN是一個專為Web應用程序設計的TWAIN掃描識別控件。你只需在TWAIN接口寫幾行代碼,就可以用兼容TWAIN的掃描儀掃描文檔或從數碼相機/采集卡中獲取圖像。然后用戶可以編輯圖像并將圖像保存為多種格式,用戶可保存圖像到遠程數據庫或者SharePoint。該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掃描儀應用程序。
<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) {
}
}
}
刷新網頁以檢查效果:
獲取元素的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項目中工作。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自: