Dynamic Web TWAIN初始化：Initialize
1 使用版本
動態Web TWAIN可以在兩種模式下運行。桌面服務或WebAssembly
1.1 桌面服務
1.1.1 什么是桌面服務
桌面服務版是指 Dynamic Web TWAIN 通過 Dynamsoft 服務進行操作，該服務是一個安靜的后臺系統服務，處理連接設備和瀏覽器客戶端之間的通信以及成像處理、編碼、解碼等。
當在桌面上使用Dynamic Web TWAIN時，默認使用服務模式（推薦），并且這種模式下必須安裝Dynamsoft服務。
1.1.2 安裝Dynamsoft服務
，英文的但是很簡單。
1.2 WebAssembly
1.2.1 什么是WebAssembly
WebAssembly (WASM) 版是指在Web Worker和WebAssembly的幫助下，動態Web TWAIN完全在瀏覽器中運行。它使用戶免于手動安裝任何東西。但這依賴于一些只有現代WASM瀏覽器才能提供的高級功能。
如果用戶決定通過移動瀏覽器訪問 Dynamic Web TWAIN 應用程序，或者他們不想在桌面上安裝任何東西，他們可以選擇 WASM 模式。
1.2.2 如何在桌面使用WebAssembly
如前所述，桌面用戶將默認使用桌面服務版，而手機和平板電腦用戶將默認使用WebAssembly版。然而，如果你想讓桌面用戶在WebAssembly版中啟動，放棄對服務的需求，你可以在初始化代碼中把UseLocalService設置為false
1.3 兩種模式的對比
桌面服務版和WebAssembly版的一個主要區別是，后者不能訪問本地設備，這意味著無法使用本地掃描儀。另外，WebAssembly版的性能和速度也不如服務版，因為它不能利用那么多資源。
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)模塊構建的，用于基于Angular、React和Vue等的應用。
在普通的應用程序中，僅引用dynamsoft.webtwain.min.js就比引用dynamsoft.webtwain.config.js和dynamsoft.webtwain.initiate.js要多。
3 加載Add-on JS文件
Dynamic Web TWAIN 提供了許多附加組件，包括一個條形碼閱讀器、一個 PDF 光柵器、兩個網絡攝像頭利用器和兩個 OCR 引擎。這些組件的文件都在資源目錄下的addon子文件夾中。了解更多關于資源文件的信息。
你可以引用相應的JavaScript文件來包含這些附加組件中的任何一個。一旦引用了一個JavaScript文件，該組件的成員方法/屬性就會在Dynamsoft名稱空間中可用，以后可以被WebTwain實例使用。
4 加載支持文件
一旦主要的JavaScript文件被加載，初始化過程就會轉向加載所有其他的支持JS文件以及CSS文件。根據DWT的運行模式，支持文件有所不同
4.1 桌面服務版文件在resource文件夾內
- 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 這三個文件被用來構建動態Web TWAIN的查看器組件，以及定義庫中其他UI元素的CSS。
4.2 WebAssembly版的特定文件
除了服務模式需要的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
答：不是，當滿足以下條件之一時，即使在服務模式下，庫也會使用WebAssembly文件
- WebTwain.Addon.Camera組件的API被調用。
- WebTwain.Camera.showVideo()或WebTwain.Camera.closeVideo()的API被調用。
5 創建WebTwain 實例
問：是否有必要手動調用Dynamsoft.DWT.Load？
答：不需要。只有當Dynamsoft.DWT.AutoLoad被設置為false時才需要調用它。如果AutoLoad為真，一旦運行環境準備好，就會自動調用Load。Dynamsoft.DWT.AutoLoad在文件dynamsoft.webtwain.config.js中定義，但可以在實際加載開始前的任何地方調用。默認情況下，它被設置為 "true"。
問：我在哪里可以得到實例的處理程序？
答：當調用Load時，DWT試圖創建WebTwain實例。一旦完成，DWT會觸發內置回調Dynamsoft.DWT.OnWebTwainReady，其中Dynamsoft.DWT.GetWebTwain方法可以用來獲取實例的處理程序。為了簡單起見，OnWebTwainReady的回調指向一個名為Dynamsoft_OnReady的全局函數。下面的片段是等價的
//注冊方式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也可以自定義注冊節點（下面三個元素就不用解釋了吧？）：
Dynamsoft.DWT.Containers = [{
ContainerId: 'dwtcontrolContainer',
Width: '585px',
Height: '513px'
}];
要創建多個實例，只需提供多個容器即可，例如，以下是創建兩個WebTwain實例的例子
Dynamsoft.DWT.Containers = [{
ContainerId: 'dwtcontrolContainer1',
Width: '585px',
Height: '513px'
}, {
ContainerId: 'dwtcontrolContainer2',
Width: '585px',
Height: '513px'
}];
5.2 Dynamsoft.DWT.CreateDWTObject
該方法手動創建一個具有默認內置查看器的WebTwain實例
問：該方法能否創建一個沒有默認瀏覽器的WebTwain實例？
答：不能，只有CreateDWTObjectEx可以這樣做。
問：這個方法是否可以和Load一起使用？
答：可以，在Load創建了最初的WebTwain實例后，該方法可以創建更多的WebTwain實例。
問：我如何使用這個方法來創建WebTwain實例而不使用Load？
答：如果Dynamsoft.DWT.AutoLoad被設置為 "true"，就會自動調用Load。因此，要忽略Load，Dynamsoft.DWT.AutoLoad必須被設置為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不能做的事情。下面的代碼創建了一個WebTwain實例，連接到運行在另一臺機器上的Dynamsoft服務，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
該方法手動創建一個沒有默認內置視圖的WebTwain實例。
// 實現代碼
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服務。
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 包括環境檢測結果（Dynamsoft.Lib.env）和全局方法如showMask()、hideMask()等信息。
- Enumerations
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線