文檔首頁(yè)>>Dynamic Web TWAIN技術(shù)特點(diǎn)>>Dynamic Web TWAIN初始化：Initialize

Dynamic Web TWAIN初始化：Initialize

1 使用版本

動(dòng)態(tài)Web TWAIN可以在兩種模式下運(yùn)行。桌面服務(wù)或WebAssembly

1.1 桌面服務(wù)

1.1.1 什么是桌面服務(wù)

桌面服務(wù)版是指 Dynamic Web TWAIN 通過(guò) Dynamsoft 服務(wù)進(jìn)行操作，該服務(wù)是一個(gè)安靜的后臺(tái)系統(tǒng)服務(wù)，處理連接設(shè)備和瀏覽器客戶(hù)端之間的通信以及成像處理、編碼、解碼等。
當(dāng)在桌面上使用Dynamic Web TWAIN時(shí)，默認(rèn)使用服務(wù)模式（推薦），并且這種模式下必須安裝Dynamsoft服務(wù)。
1.1.2 安裝Dynamsoft服務(wù)

點(diǎn)擊這里翻官方的安裝手冊(cè)，英文的但是很簡(jiǎn)單。

1.2 WebAssembly

1.2.1 什么是WebAssembly

WebAssembly (WASM) 版是指在Web Worker和WebAssembly的幫助下，動(dòng)態(tài)Web TWAIN完全在瀏覽器中運(yùn)行。它使用戶(hù)免于手動(dòng)安裝任何東西。但這依賴(lài)于一些只有現(xiàn)代WASM瀏覽器才能提供的高級(jí)功能。

如果用戶(hù)決定通過(guò)移動(dòng)瀏覽器訪問(wèn) Dynamic Web TWAIN 應(yīng)用程序，或者他們不想在桌面上安裝任何東西，他們可以選擇 WASM 模式。

1.2.2 如何在桌面使用WebAssembly

如前所述，桌面用戶(hù)將默認(rèn)使用桌面服務(wù)版，而手機(jī)和平板電腦用戶(hù)將默認(rèn)使用WebAssembly版。然而，如果你想讓桌面用戶(hù)在WebAssembly版中啟動(dòng)，放棄對(duì)服務(wù)的需求，你可以在初始化代碼中把UseLocalService設(shè)置為false

1.3 兩種模式的對(duì)比

桌面服務(wù)版和WebAssembly版的一個(gè)主要區(qū)別是，后者不能訪問(wèn)本地設(shè)備，這意味著無(wú)法使用本地掃描儀。另外，WebAssembly版的性能和速度也不如服務(wù)版，因?yàn)樗荒芾媚敲炊噘Y源。

2 加載核心JS庫(kù)

2.1 核心文件的介紹

在SDK安裝時(shí)包含的Resources目錄中，你可以找到以下兩個(gè)文件，它們是定義Dynamic Web TWAIN配置和操作的主要JS文件。

dynamsoft.webtwain.config.js【配置文件】
dynamsoft.webtwain.initiate.js【功能核心】

問(wèn)：先引用哪個(gè)JavaScript文件有關(guān)系嗎？
答：一般來(lái)說(shuō)，dynamsoft.webtwain.initiate.js 和 dynamsoft.webtwain.config.js 都需要被引用。在前一個(gè)文件中，它檢測(cè)后者是否已被加載；如果沒(méi)有，它將等待。因此，哪個(gè)文件在先并不重要。
問(wèn)：為什么我看到的是dynamsoft.webtwain.min.js和dynamsoft.webtwain.min.mjs而不是上面的兩個(gè)文件？
答：這兩個(gè)文件存在于官方npm包dwt中。為了簡(jiǎn)單起見(jiàn)，在每一個(gè)文件中，Dynamsoft都包含了所有必要的JavaScript代碼，其中包括上面提到的兩個(gè)文件加上dynamsoft.webtwain.install.js和所有額外的組件（附加組件）。.js文件是代碼的簡(jiǎn)單組合，而.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 提供了許多附加組件，包括一個(gè)條形碼閱讀器、一個(gè) PDF 光柵器、兩個(gè)網(wǎng)絡(luò)攝像頭利用器和兩個(gè) OCR 引擎。這些組件的文件都在資源目錄下的addon子文件夾中。了解更多關(guān)于資源文件的信息。

你可以引用相應(yīng)的JavaScript文件來(lái)包含這些附加組件中的任何一個(gè)。一旦引用了一個(gè)JavaScript文件，該組件的成員方法/屬性就會(huì)在Dynamsoft名稱(chēng)空間中可用，以后可以被WebTwain實(shí)例使用。

4 加載支持文件

一旦主要的JavaScript文件被加載，初始化過(guò)程就會(huì)轉(zhuǎn)向加載所有其他的支持JS文件以及CSS文件。根據(jù)DWT的運(yùn)行模式，支持文件有所不同
4.1 桌面服務(wù)版文件在resource文件夾內(nèi)

dynamsoft.webtwain.install.js
src/dynamsoft.viewer.js
src/dynamsoft.viewer.css
src/dynamsoft.webtwain.css

4.1.1 dynamsoft.webtwain.install.js 這個(gè)文件用于配置當(dāng)Dynamsoft服務(wù)沒(méi)有安裝或需要升級(jí)時(shí)顯示的對(duì)話框。當(dāng)dynamsoft.webtwain.initiate.js中的代碼執(zhí)行時(shí)，這個(gè)文件會(huì)自動(dòng)加載。因此，它不需要在HTML頁(yè)面中被引用。

4.1.2 dynamsoft.viewer.js, dynamsoft.viewer.css and dynamsoft.webtwain.css 這三個(gè)文件被用來(lái)構(gòu)建動(dòng)態(tài)Web TWAIN的查看器組件，以及定義庫(kù)中其他UI元素的CSS。

4.2 WebAssembly版的特定文件

除了服務(wù)模式需要的4個(gè)文件外，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

PDF讀寫(xiě)

dynamsoft.pdfReader-<version number>.wasm
dynamsoft.pdfWriter-<version number>.wasm

問(wèn)：上面提到的7個(gè)文件是否都只在WebAssembly版中使用？
答：不是，當(dāng)滿足以下條件之一時(shí)，即使在服務(wù)模式下，庫(kù)也會(huì)使用WebAssembly文件

WebTwain.Addon.Camera組件的API被調(diào)用。
WebTwain.Camera.showVideo()或WebTwain.Camera.closeVideo()的API被調(diào)用。

5 創(chuàng)建WebTwain 實(shí)例

問(wèn)：是否有必要手動(dòng)調(diào)用Dynamsoft.DWT.Load？
答：不需要。只有當(dāng)Dynamsoft.DWT.AutoLoad被設(shè)置為false時(shí)才需要調(diào)用它。如果AutoLoad為真，一旦運(yùn)行環(huán)境準(zhǔn)備好，就會(huì)自動(dòng)調(diào)用Load。Dynamsoft.DWT.AutoLoad在文件dynamsoft.webtwain.config.js中定義，但可以在實(shí)際加載開(kāi)始前的任何地方調(diào)用。默認(rèn)情況下，它被設(shè)置為 "true"。
問(wèn)：我在哪里可以得到實(shí)例的處理程序？
答：當(dāng)調(diào)用Load時(shí)，DWT試圖創(chuàng)建WebTwain實(shí)例。一旦完成，DWT會(huì)觸發(fā)內(nèi)置回調(diào)Dynamsoft.DWT.OnWebTwainReady，其中Dynamsoft.DWT.GetWebTwain方法可以用來(lái)獲取實(shí)例的處理程序。為了簡(jiǎn)單起見(jiàn)，OnWebTwainReady的回調(diào)指向一個(gè)名為Dynamsoft_OnReady的全局函數(shù)。下面的片段是等價(jià)的

//注冊(cè)方式1
Dynamsoft.DWT.OnWebTwainReady = function() {
    DWObject = Dynamsoft.DWT.GetWebTwain("dwtcontrolContainer");
}
//注冊(cè)方式2
Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);
function Dynamsoft_OnReady() {
    DWObject = Dynamsoft.DWT.GetWebTwain("dwtcontrolContainer");
}

在dynamsoft.webtwain.config.js也可以自定義注冊(cè)節(jié)點(diǎn)（下面三個(gè)元素就不用解釋了吧？）：

Dynamsoft.DWT.Containers = [{
    ContainerId: 'dwtcontrolContainer',
    Width: '585px',
    Height: '513px'
}];

要?jiǎng)?chuàng)建多個(gè)實(shí)例，只需提供多個(gè)容器即可，例如，以下是創(chuàng)建兩個(gè)WebTwain實(shí)例的例子

Dynamsoft.DWT.Containers = [{
    ContainerId: 'dwtcontrolContainer1',
    Width: '585px',
    Height: '513px'
}, {
    ContainerId: 'dwtcontrolContainer2',
    Width: '585px',
    Height: '513px'
}];

5.2 Dynamsoft.DWT.CreateDWTObject

該方法手動(dòng)創(chuàng)建一個(gè)具有默認(rèn)內(nèi)置查看器的WebTwain實(shí)例

問(wèn)：該方法能否創(chuàng)建一個(gè)沒(méi)有默認(rèn)瀏覽器的WebTwain實(shí)例？

答：不能，只有CreateDWTObjectEx可以這樣做。

問(wèn)：這個(gè)方法是否可以和Load一起使用？
答：可以，在Load創(chuàng)建了最初的WebTwain實(shí)例后，該方法可以創(chuàng)建更多的WebTwain實(shí)例。

問(wèn)：我如何使用這個(gè)方法來(lái)創(chuàng)建WebTwain實(shí)例而不使用Load？
答：如果Dynamsoft.DWT.AutoLoad被設(shè)置為 "true"，就會(huì)自動(dòng)調(diào)用Load。因此，要忽略Load，Dynamsoft.DWT.AutoLoad必須被設(shè)置為false。

問(wèn)：如何使用CreateDWTObject
答：該方法的語(yǔ)法如下

CreateDWTObject(
    ContainerId: string,
    host ? : string,
    port ? : string | number,
    portSSL ? : string | number,
    successCallBack: (DWObject: WebTwain) => void,
    failureCallBack: (errorString: string) => void
): void;

以下相當(dāng)于使用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)建了一個(gè)WebTwain實(shí)例，連接到運(yùn)行在另一臺(tái)機(jī)器上的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

該方法手動(dòng)創(chuàng)建一個(gè)沒(méi)有默認(rèn)內(nèi)置視圖的WebTwain實(shí)例。

// 實(shí)現(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需要一個(gè)WebTwainId而不是一個(gè)ContainerId。

接下來(lái)是一個(gè)沒(méi)有config配置的實(shí)例

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類(lèi)似，CreateDWTObjectEx也可以連接到另一臺(tái)機(jī)器上運(yùn)行的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 名稱(chēng)空間下運(yùn)行。

Dynamsoft是最高級(jí)別的命名空間。Dynamic Web TWAIN 和其他 Dynamsoft 庫(kù)都是在 Dynamsoft 下定義的。對(duì)于 Dynamic Web TWAIN 來(lái)說(shuō)，這個(gè)命名空間的主要成員是：

DWT 包括全局方法、幫助WebTwain初始化和實(shí)例化的屬性等，如前文所示。
Lib 包括環(huán)境檢測(cè)結(jié)果（Dynamsoft.Lib.env）和全局方法如showMask()、hideMask()等信息。
Enumerations 點(diǎn)擊這里看詳情

Dynamic Web TWAIN初始化：Initialize

用科技創(chuàng)就卓越

Create excellence with technology