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

环境搭建步骤

1. 把扫描仪通过USB接口连接到一台Windows主机上

2. 下载安装Dynamic Web TWAIN SDK

3. 申请一个30天免费试用的序列号

4. 在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 list
    dwtRemoteObj.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) });

注册远程扫描事件。在获取数据之后转换成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