掃描儀和電腦通常是1對1連接的。在辦公場景中，如果有多人需要使用掃描儀，要麼共用一臺電腦，要麼購買多臺掃描儀分別連接不同的電腦。如果能夠使用瀏覽器，通過網絡直接訪問掃描儀，那麼既方便，又省錢。Dynamsoft的Dynamic Web TWAIN v16.1.1提供了網絡解決方案。通過Websocket的連接，用戶可以在手機和桌面瀏覽器中操控掃描儀將文檔電子化。
Dynamic Web TWAIN是什麼
Dynamic Web TWAIN是Dynamsoft提供的跨平臺掃描儀SDK。包含了一個平臺相關的服務進程和一套JavaScript的接口。
安裝服務進程
針對不同的操作系統（Windows, Linux, macOS, Raspberry Pi OS），下載安裝包。在Resources目錄中可以找到相應的服務進程進行安裝。
簡單的掃描儀Web應用
用Dynamic Web TWAIN開發文檔掃描應用非常簡單。 首先通過npm安裝JS庫：
npm install dwt @types/dwt
然後創建一個index.htm文件：
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="dist/dynamsoft.webtwain.min.js"></script>
</head>
<body>
<input type="button" value="Scan" onclick="AcquireImage();" />
<div id="dwtcontrolContainer"></div>
<script type="text/javascript">
Dynamsoft.WebTwainEnv.ResourcesPath = "dist";
// Get the license key from https://www.dynamsoft.com/CustomerPortal/Portal/Triallicense.aspx
Dynamsoft.WebTwainEnv.ProductKey = 'LICENSE-KEY';
window.onload = function () {
Dynamsoft.WebTwainEnv.Load();
};
var DWObject;
function Dynamsoft_OnReady() {
// dwtcontrolContainer is the id of the DIV to create the WebTwain instance in.
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
}
function AcquireImage() {
if (DWObject) {
DWObject.SelectSource(function () {
DWObject.OpenSource();
DWObject.AcquireImage(
{
PixelType: Dynamsoft.EnumDWT_PixelType.TWPT_RGB,
Resolution: 200,
IfDisableSourceAfterAcquire: true
},
function () {
console.log("Successful!");
},
function (settings, errCode, errString) {
alert(errString)
}
);
}, function () {
alert('SelectSource failed!');
});
}
}
</script>
</body>
</html>
雙擊這個文件就可以進行文檔掃描。
如何實現文檔遠程掃描
開啓遠程服務
目前，默認情況下，遠程掃描模式是關閉的，需要手動打開。 操作步驟：
-
打開
DSConfiguration.ini文件，在裏面添加：Server=<連接掃描儀的電腦IP地址>這個配置文件的路徑在不同的系統中是不一樣的。 Windows
C:\Windows\SysWOW64\Dynamsoft\DynamsoftServicex64_16\DSConfiguration.ini![在這裏插入圖片描述]()
Linux, macOS, Raspberry Pi OS
/opt/dynamsoft/DynamsoftService/DSConfiguration.ini![在這裏插入圖片描述]()
-
重啓Dynamsoft Service。
代碼實現
創建一個index.htm文件。 添加兩個select元素。一個用於選擇IP，一個用於選擇掃描儀：
<select size="1" id="remote" style="position: relative; width: 220px;">
<option>192.168.8.84</option>
<option>192.168.8.85</option>
</select>
<select size="1" id="source" style="position: relative; width: 220px;"></select>
添加一個div元素用於初始化：
<div id="dwtcontrolContainer"></div>
<script type="text/javascript">
Dynamsoft.WebTwainEnv.UseLocalService = false;
Dynamsoft.WebTwainEnv.AutoLoad = true;
// Get a free trial license key from https://www.dynamsoft.com/CustomerPortal/Portal/Triallicense.aspx
Dynamsoft.WebTwainEnv.ProductKey = 'LICENSE-KEY';
var DWObject = null;
var DWServiceObject = null;
Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
if(DWObject) {
DWObject.MouseShape = true;
createScanObject(ip.value);
}
}
創建服務對象用於遠程連接:
function createScanObject(ip) {
var dwtConfig={WebTwainId:ip, Host: ip, UseLocalService:'true'};
Dynamsoft.WebTwainEnv.CreateDWTObjectEx(dwtConfig, function (dwt) {
DWServiceObject = dwt;
DWServiceObject.RegisterEvent('OnPostTransferAsync', function(outputInfo){
DWServiceObject.ConvertToBlob(
[DWServiceObject.ImageIDToIndex(outputInfo.imageId)],
Dynamsoft.EnumDWT_ImageType.IT_PNG,
function (result, indices, type) {
DWObject.LoadImageFromBinary(
result,
function () {
console.log('LoadImageFromBinary success');
DWServiceObject.RemoveImage(DWServiceObject.ImageIDToIndex(outputInfo.imageId));
},
function (errorCode, errorString) {
console.log(errorString);
}
);
},
function (errorCode, errorString) {
console.log(errorString);
}
);
}
);
DWServiceObject.GetSourceNamesAsync().then(function(result) {
// remove previous options
for (var i=0; i< selectSource.length; i++) {
selectSource.remove(i);
}
for (var i = 0; i < result.length; i++)
selectSource.options.add(new Option(result[i], i));
},
function(fail) {
console.log(fail);
});
},
function (error){console.log(error)});
}
建立連接之後就可以觸發遠程掃描：
function acquireImage() {
if (DWServiceObject) {
var onSuccess, onFailure;
onSuccess = onFailure = function () {
DWServiceObject.CloseSource();
};
var deviceConfiguration = {
SelectSourceByIndex: 0,
IfShowUI: false,
PixelType:Dynamsoft.EnumDWT_PixelType.TWPT_RGB,
Resolution: 300,
IfFeederEnabled: false,
IfDuplexEnabled: false,
IfDisableSourceAfterAcquire: true,
};
DWServiceObject.SelectSourceByIndex(document.getElementById('source').selectedIndex);
DWServiceObject.AcquireImage(deviceConfiguration, onSuccess, onFailure);
}
}
注意：如果掃描儀連接在Linux電腦上，速度會有點慢。因爲Linux的SANE驅動在獲取掃描儀列表的時候速度比較慢。
以下是PC和手機瀏覽器，通過網絡控制掃描儀（連接在一臺Windows PC上）獲取文檔的效果：
視頻
https://www.bilibili.com/video/BV1fC4y147PB/