Dynamic Web TWAIN初始化:Initialize
1 使用版本
動態(tài)Web TWAIN可以在兩種模式下運行。桌面服務(wù)或WebAssembly
1.1 桌面服務(wù)
1.1.1 什么是桌面服務(wù)
桌面服務(wù)版是指 Dynamic Web TWAIN 通過 Dynamsoft 服務(wù)進行操作,該服務(wù)是一個安靜的后臺系統(tǒng)服務(wù),處理連接設(shè)備和瀏覽器客戶端之間的通信以及成像處理、編碼、解碼等。
當在桌面上使用Dynamic Web TWAIN時,默認使用服務(wù)模式(推薦),并且這種模式下必須安裝Dynamsoft服務(wù)。
1.1.2 安裝Dynamsoft服務(wù)
,英文的但是很簡單。
1.2 WebAssembly
1.2.1 什么是WebAssembly
WebAssembly (WASM) 版是指在Web Worker和WebAssembly的幫助下,動態(tài)Web TWAIN完全在瀏覽器中運行。它使用戶免于手動安裝任何東西。但這依賴于一些只有現(xiàn)代WASM瀏覽器才能提供的高級功能。
如果用戶決定通過移動瀏覽器訪問 Dynamic Web TWAIN 應(yīng)用程序,或者他們不想在桌面上安裝任何東西,他們可以選擇 WASM 模式。
1.2.2 如何在桌面使用WebAssembly
如前所述,桌面用戶將默認使用桌面服務(wù)版,而手機和平板電腦用戶將默認使用WebAssembly版。然而,如果你想讓桌面用戶在WebAssembly版中啟動,放棄對服務(wù)的需求,你可以在初始化代碼中把UseLocalService設(shè)置為false
1.3 兩種模式的對比
桌面服務(wù)版和WebAssembly版的一個主要區(qū)別是,后者不能訪問本地設(shè)備,這意味著無法使用本地掃描儀。另外,WebAssembly版的性能和速度也不如服務(wù)版,因為它不能利用那么多資源。
2 加載核心JS庫
2.1 核心文件的介紹
在SDK安裝時包含的Resources目錄中,你可以找到以下兩個文件,它們是定義Dynamic Web TWAIN配置和操作的主要JS文件。
- dynamsoft.webtwain.config.js【配置文件】
- dynamsoft.webtwain.initiate.js【功能核心】
答:一般來說,dynamsoft.webtwain.initiate.js 和 dynamsoft.webtwain.config.js 都需要被引用。在前一個文件中,它檢測后者是否已被加載;如果沒有,它將等待。因此,哪個文件在先并不重要。
問:為什么我看到的是dynamsoft.webtwain.min.js和dynamsoft.webtwain.min.mjs而不是上面的兩個文件?
答:這兩個文件存在于官方npm包dwt中。為了簡單起見,在每一個文件中,Dynamsoft都包含了所有必要的JavaScript代碼,其中包括上面提到的兩個文件加上dynamsoft.webtwain.install.js和所有額外的組件(附加組件)。.js文件是代碼的簡單組合,而.mjs文件則是作為ECMAScript 6 (ES6)模塊構(gòu)建的,用于基于Angular、React和Vue等的應(yīng)用。
在普通的應(yīng)用程序中,僅引用dynamsoft.webtwain.min.js就比引用dynamsoft.webtwain.config.js和dynamsoft.webtwain.initiate.js要多。
3 加載Add-on JS文件
Dynamic Web TWAIN 提供了許多附加組件,包括一個條形碼閱讀器、一個 PDF 光柵器、兩個網(wǎng)絡(luò)攝像頭利用器和兩個 OCR 引擎。這些組件的文件都在資源目錄下的addon子文件夾中。了解更多關(guān)于資源文件的信息。
你可以引用相應(yīng)的JavaScript文件來包含這些附加組件中的任何一個。一旦引用了一個JavaScript文件,該組件的成員方法/屬性就會在Dynamsoft名稱空間中可用,以后可以被WebTwain實例使用。
4 加載支持文件
一旦主要的JavaScript文件被加載,初始化過程就會轉(zhuǎn)向加載所有其他的支持JS文件以及CSS文件。根據(jù)DWT的運行模式,支持文件有所不同
4.1 桌面服務(wù)版文件在resource文件夾內(nèi)
- dynamsoft.webtwain.install.js
- src/dynamsoft.viewer.js
- src/dynamsoft.viewer.css
- src/dynamsoft.webtwain.css
4.1.2 dynamsoft.viewer.js, dynamsoft.viewer.css and dynamsoft.webtwain.css 這三個文件被用來構(gòu)建動態(tài)Web TWAIN的查看器組件,以及定義庫中其他UI元素的CSS。
4.2 WebAssembly版的特定文件
除了服務(wù)模式需要的4個文件外,WebAssembly版還需要以下文件:
Image IO
- dynamsoft.imageio.js
- dynamsoft.imageio_wasm-<version number>.js
- dynamsoft.imagecore-<version number>.wasm
- dynamsoft.imageio-<version number>.wasm
- dynamsoft.imageProc-<version number>.wasm
- dynamsoft.pdfReader-<version number>.wasm
- dynamsoft.pdfWriter-<version number>.wasm
答:不是,當滿足以下條件之一時,即使在服務(wù)模式下,庫也會使用WebAssembly文件
- WebTwain.Addon.Camera組件的API被調(diào)用。
- WebTwain.Camera.showVideo()或WebTwain.Camera.closeVideo()的API被調(diào)用。
5 創(chuàng)建WebTwain 實例
問:是否有必要手動調(diào)用Dynamsoft.DWT.Load?
答:不需要。只有當Dynamsoft.DWT.AutoLoad被設(shè)置為false時才需要調(diào)用它。如果AutoLoad為真,一旦運行環(huán)境準備好,就會自動調(diào)用Load。Dynamsoft.DWT.AutoLoad在文件dynamsoft.webtwain.config.js中定義,但可以在實際加載開始前的任何地方調(diào)用。默認情況下,它被設(shè)置為 "true"。
問:我在哪里可以得到實例的處理程序?
答:當調(diào)用Load時,DWT試圖創(chuàng)建WebTwain實例。一旦完成,DWT會觸發(fā)內(nèi)置回調(diào)Dynamsoft.DWT.OnWebTwainReady,其中Dynamsoft.DWT.GetWebTwain方法可以用來獲取實例的處理程序。為了簡單起見,OnWebTwainReady的回調(diào)指向一個名為Dynamsoft_OnReady的全局函數(shù)。下面的片段是等價的
//注冊方式1 Dynamsoft.DWT.OnWebTwainReady = function() { DWObject = Dynamsoft.DWT.GetWebTwain("dwtcontrolContainer"); } //注冊方式2 Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady); function Dynamsoft_OnReady() { DWObject = Dynamsoft.DWT.GetWebTwain("dwtcontrolContainer"); }在dynamsoft.webtwain.config.js也可以自定義注冊節(jié)點(下面三個元素就不用解釋了吧?):
Dynamsoft.DWT.Containers = [{ ContainerId: 'dwtcontrolContainer', Width: '585px', Height: '513px' }];要創(chuàng)建多個實例,只需提供多個容器即可,例如,以下是創(chuàng)建兩個WebTwain實例的例子
Dynamsoft.DWT.Containers = [{ ContainerId: 'dwtcontrolContainer1', Width: '585px', Height: '513px' }, { ContainerId: 'dwtcontrolContainer2', Width: '585px', Height: '513px' }];5.2 Dynamsoft.DWT.CreateDWTObject
該方法手動創(chuàng)建一個具有默認內(nèi)置查看器的WebTwain實例
問:該方法能否創(chuàng)建一個沒有默認瀏覽器的WebTwain實例?
答:不能,只有CreateDWTObjectEx可以這樣做。
問:這個方法是否可以和Load一起使用?
答:可以,在Load創(chuàng)建了最初的WebTwain實例后,該方法可以創(chuàng)建更多的WebTwain實例。
問:我如何使用這個方法來創(chuàng)建WebTwain實例而不使用Load?
答:如果Dynamsoft.DWT.AutoLoad被設(shè)置為 "true",就會自動調(diào)用Load。因此,要忽略Load,Dynamsoft.DWT.AutoLoad必須被設(shè)置為false。
問:如何使用CreateDWTObject
答:該方法的語法如下
CreateDWTObject( ContainerId: string, host ? : string, port ? : string | number, portSSL ? : string | number, successCallBack: (DWObject: WebTwain) => void, failureCallBack: (errorString: string) => void ): void;
以下相當于使用Load與配置Dynamsoft.DWT.Containers = [{ContainerId: 'dwtcontrolContainer', Width: '585px', Height: '513px'}。
Dynamsoft.DWT.CreateDWTObject( 'dwtcontrolContainer', function(obj) { obj.Width = 585; obj.Height = 513; }, function(err) { console.log(err); } );
該方法還可以做一些Load不能做的事情。下面的代碼創(chuàng)建了一個WebTwain實例,連接到運行在另一臺機器上的Dynamsoft服務(wù),IP為192.168.8.221,端口為18622和18623(SSL)。
Dynamsoft.DWT.UseLocalService = true; Dynamsoft.DWT.CreateDWTObject( 'dwtcontrolContainer', "192.168.8.221", "18622", "18623" function(obj) {}, function(err) { console.log(err); } );5.3 Dynamsoft.DWT.CreateDWTObjectEx
該方法手動創(chuàng)建一個沒有默認內(nèi)置視圖的WebTwain實例。
// 實現(xiàn)代碼 CreateDWTObjectEx( dwtInitialConfig: DWTInitialConfig, successCallBack: (DWObject: WebTwain) => void, failureCallBack: (errorString: string) => void ): void;
在接口配置DWTInitialConfig中
interface DWTInitialConfig { WebTwainId: string; Host?: string; Port?: string; SSLPort?: string; }
與CreateDWTObject相比,CreateDWTObjectEx需要一個WebTwainId而不是一個ContainerId。
接下來是一個沒有config配置的實例
var DWObject = null; Dynamsoft.DWT.CreateDWTObjectEx({ WebTwainId: 'dwtcontrol' }, function(obj) { DWObject = obj; DWObject.Viewer.bind(document.getElementById('dwtcontrolContainer')); DWObject.Viewer.height = 600; DWObject.Viewer.width = 800; DWObject.Viewer.show(); }, function(err) { console.log(err); } );
與CreateDWTObject類似,CreateDWTObjectEx也可以連接到另一臺機器上運行的Dynamsoft服務(wù)。
Dynamsoft.DWT.UseLocalService = true; Dynamsoft.DWT.CreateDWTObjectEx({ WebTwainId: 'dwtcontrolContainer1', Host: "192.168.8.221", Port: "18622", SSLPort: "18623" }, function(obj) {}, function(err) { console.log(err); } );6 Dynamsoft的命名空間
Dynamic Web TWAIN 在 Dynamsoft 名稱空間下運行。
Dynamsoft是最高級別的命名空間。Dynamic Web TWAIN 和其他 Dynamsoft 庫都是在 Dynamsoft 下定義的。對于 Dynamic Web TWAIN 來說,這個命名空間的主要成員是:
- DWT 包括全局方法、幫助WebTwain初始化和實例化的屬性等,如前文所示。
- Lib 包括環(huán)境檢測結(jié)果(Dynamsoft.Lib.env)和全局方法如showMask()、hideMask()等信息。
- Enumerations