如何在手機瀏覽器中控制掃描儀做文檔掃描

辦公室裏掃描儀必不可少。現在智能化辦公，有時候我們會希望文檔掃描之後直接傳輸到手機裏。如果用的是帶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