如何在手机浏览器中控制扫描仪做文档扫描

办公室里扫描仪必不可少。现在智能化办公，有时候我们会希望文档扫描之后直接传输到手机里。如果用的是带WiFi的智能扫描仪，那么可以通过安装app来获取电子文档。如果用的是普通扫描仪，那么只能先通过PC获取扫描文档，然后再拷贝到手机里，很不方便。这篇文章分享适用于手机浏览器的解决方案。既不需要安装app，也不需要通过PC拷贝。

环境搭建步骤

把扫描仪通过USB接口连接到一台Windows主机上
下载安装Dynamic Web TWAIN SDK
申请一个30天免费试用的序列号
在Windows的浏览器里打开http://127.0.0.1:18625/admin/,把host改成主机的局域网IP地址：

使用HTML5远程控制扫描仪

创建一个空的工程目录。把Dynamsoft\Dynamic Web TWAIN SDK <version>\Resources目录拷贝到这个工程目录中。

创建一个index.htm文件。

引用JS文件：

<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>

通过自动或者手动的方式创建Dynamic Web TWAIN对象，并绑定一个DIV元素作为图像显示容器：

// Create a Div element
var element = document.createElement('div');
var containerName = 'container';
element.id = containerName;
document.body.appendChild(element);// Dynamsoft.WebTwainEnv.ProductKey = 'LICENSE-KEY';// Load DWT viewer automatically
function initDWT() {Dynamsoft.WebTwainEnv.UseLocalService = false;Dynamsoft.WebTwainEnv.AutoLoad = true;Dynamsoft.WebTwainEnv.Containers = [{ ContainerId: containerName, Width: viewerWidth, Height: viewerHeight }];Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', function () {dwtObj = Dynamsoft.WebTwainEnv.GetWebTwain(containerName);if (dwtObj) {dwtObj.Width = viewerWidth;dwtObj.Height = viewerHeight;dwtObj.MouseShape = true;}});
}// Load DWT viewer manually
function initDWTManually() {Dynamsoft.WebTwainEnv.CreateDWTObjectEx({WebTwainId: '1'},function (obj) {dwtObj = obj;dwtObj.Viewer.bind(element);dwtObj.Viewer.width = viewerWidth;dwtObj.Viewer.height = viewerHeight;dwtObj.Viewer.show();},function (err) {console.log(err);});
}

创建缩略图显示容器：

var thumbnailViewer = dwtObj.Viewer.createThumbnailViewer();
thumbnailViewer.show();

接下来基于IP地址，创建一个新的Dynamic Web TWAIN对象：

var dwtConfig = { WebTwainId: ip, Host: ip, UseLocalService: 'true' };
Dynamsoft.WebTwainEnv.CreateDWTObjectEx(dwtConfig, function (dwt) {dwtRemoteObj = dwt;dwtRemoteObj.RegisterEvent('OnPostTransferAsync', function (outputInfo) {});// Update the remote scanner listdwtRemoteObj.GetSourceNamesAsync().then(function (result) {// Remove previous optionsfor (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) });

注册远程扫描事件。在获取数据之后转换成blob，然后加载到显示容器中:

dwtRemoteObj.RegisterEvent('OnPostTransferAsync', function (outputInfo) {dwtRemoteObj.ConvertToBlob([dwtRemoteObj.ImageIDToIndex(outputInfo.imageId)],Dynamsoft.EnumDWT_ImageType.IT_PNG,function (result, indices, type) {dwtObj.LoadImageFromBinary(result,function () {console.log('Load the image successfully');dwtRemoteObj.RemoveImage(dwtRemoteObj.ImageIDToIndex(outputInfo.imageId));},function (errorCode, errorString) {console.log(errorString);});},function (errorCode, errorString) {console.log(errorString);});
}
);

最后在工程根目录下，用Python快速启动一个HTTP服务：

python -m http.server

打开手机浏览器，输入PC的IP地址，就可以操控扫描仪扫描文档了。

源码

https://github.com/Dynamsoft/web-document-remote-scan