65.9K
CodeProject 正在变化。 阅读更多。
Home

如何通过网络从移动Web浏览器访问远程扫描仪

肖玲
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2020年8月20日

CPOL

4分钟阅读

viewsIcon

6666

借助 Dynamic Web TWAIN v16.1.1 和几行代码，Web 开发人员可以快速构建跨浏览器 Web 应用来控制连接到 PC、服务器或嵌入式设备的远程扫描仪。

您如何使用移动设备扫描文档？一种通用且直观的方法是使用移动相机应用程序。移动相机确实为快速图像捕捉带来了便利。尽管如此，对于获得高质量的文档图像，真正的硬件扫描仪比使用移动相机实现的软件扫描仪要好。Dynamsoft 为企业级文档管理应用程序带来了远程扫描仪解决方案。借助 Dynamic Web TWAIN v16.1.1 和几行代码，Web 开发人员可以快速构建跨浏览器 Web 应用来控制连接到 PC、服务器或嵌入式设备的远程扫描仪。

Dynamic Web TWAIN：真正的跨平台扫描仪 SDK for Web

Dynamic Web TWAIN 是一套专为硬件扫描仪编程设计的 JavaScript API。它支持所有主流操作系统和 Web 浏览器。借助该 SDK，Web 开发人员可以通过编写几行代码来创建 Web 文档扫描和管理应用程序。要体验 Dynamic Web TWAIN 的工作原理，请尝试 在线演示。Dynamic Web TWAIN 支持本地和远程模式。用户可以通过绑定不同的 IP 地址到 Dynamsoft 服务来切换模式。

本地模式

在本地模式下，Dynamsoft 服务允许 JavaScript API 访问扫描仪。

您可以通过 NPM 快速安装 SDK

npm install dwt @types/dwt

创建一个简单的 index.html 文件，用于在 Web 浏览器中扫描文档

<!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>

远程扫描模式：整合独立的扫描仪到一个集群

只要您在 Windows、Linux、macOS 和 Raspberry Pi 上安装了 Dynamsoft 服务，您就可以通过配置 IP 地址来简单地开启远程模式。

在上图中，您可以看到 Dynamsoft 服务是扫描仪和 Web 客户端之间的桥梁。

如何从硬件扫描仪扫描文档到您的移动 Web 浏览器？

Dynamic Web TWAIN 安装程序包含一个用于 Web 开发的 Resources 文件夹。

创建一个项目文件夹，并将 Dynamic Web TWAIN 安装目录中的 Resources 文件夹复制到您的项目目录中。

创建一个 index.html 文件。

添加扫描仪 <select> 元素

添加两个 HTML <select> 元素：一个用于扫描仪服务器选择，另一个用于扫描仪源选择。如果您知道哪些机器连接了扫描仪，您可以硬编码 IP 地址。请参考 配置代理机器上的 IP 地址 来了解如何设置和获取代理机器的 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>

添加 Web TWAIN 容器

添加一个 HTML <div> 元素作为 Web TWAIN 容器，并使用有效的试用许可证密钥初始化 Dynamic Web TWAIN 对象

<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);
            }
        }

添加 Dynamsoft 服务对象

与本地扫描仪访问的代码相比，除了 Dynamic Web TWAIN 对象之外，您还需要创建一个用于访问远程扫描仪的对象，该对象基于用于 websocket 连接的 IP 地址。

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)});
        }

从扫描仪获取图像

一旦建立了远程连接，您就可以从远程扫描仪获取图像数据，并将其加载到 Web 客户端上创建的图像容器中。以下是触发远程文档扫描事件的代码。

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);
            }
        }

您需要知道，在使用 SANE 后端查询 Linux 上的扫描仪设备时，会花费一些时间。因此，如果您想使用连接到 Linux 系统的远程扫描仪，请耐心等待源列表返回。

测试

现在，您可以通过您的移动 Web 浏览器尝试从办公室里的任何扫描仪扫描文档。

配置代理机器上的 IP 地址

要运行您机器上的 Dynamsoft 服务，您可以下载包含免费 30 天试用许可证的完整 Dynamic Web TWAIN SDK 套件。或者，您可以从 在线演示页面 安装特定于平台的扫描服务，并从 在线门户 申请有效的许可证密钥。

出于安全原因，默认情况下，Dynamsoft 服务不允许远程访问。如果您想使用远程连接，您需要手动配置设置。

  1. 编辑 DSConfiguration.ini。在配置文件中添加您的服务器 IP 地址。
Server=<MACHINE IP ADDRESS>

配置文件在代理机器上的位置是？

C:\Windows\SysWOW64\Dynamsoft\DynamsoftServicex64_16\DSConfiguration.ini

Linux、macOS 和 Raspberry Pi OS

/opt/dynamsoft/DynamsoftService/DSConfiguration.ini

  1. 重新启动 Dynamsoft 服务以激活远程连接。

源代码

https://github.com/yushulx/web-twain-remote-scan

SDK 下载

https://www.dynamsoft.com/Downloads/WebTWAIN_Download.aspx

更多示例代码

https://github.com/Dynamsoft/Dynamic-Web-TWAIN

API 文档

https://www.dynamsoft.com/docs/dwt/

发布说明

https://www.dynamsoft.com/Products/WebTWAIN_News.aspx

技术支持

如果您对 Dynamic Web TWAIN SDK 有任何疑问，请随时联系 support@dynamsoft.com。

© . All rights reserved.