JavaScript文档扫描 - 支持Windows, Linux & macOS

不同的操作系统，底层使用的扫描仪驱动是不同的。Linux上用SANE，Windows上用TWAIN，Mac上用TWAIN或者ICA。不管上层用的是什么高级语言 (Java, Python, JavaScript等等), 一个跨平台的文档扫描SDK或者软件必须支持不同平台的扫描仪访问协议。Dynamic Web TWAIN是目前唯一一个支持Windows, Linux和macOS的文档扫描SDK。这里分享下如何使用Node.js来快速实现一个支持多平台的web文档扫描应用。

参考原文：JavaScript Document Scanning for Windows, Linux and macOS

作者：Xiao Ling

翻译：yushulx

JavaScript多平台文档扫描

1. 安装Node.js.

2. 创建工程document-scanning。初始化：

npm init

3. 通过npm安装Express和Dynamic Web TWAIN：

npm install express -–save
npm install dwt --save

4. 创建HTML前端页面。初始Dynamic Web TWAIN化对象：

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

    打开node_modules/dwt/dist/dynamsoft.webtwain.config.js修改资源路径：

Dynamsoft.WebTwainEnv.ResourcesPath = '<Resource Directory>';

    注册事件监听：

Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);  // Register OnWebTwainReady event. This event fires as soon as Dynamic Web TWAIN is initialized and ready to be used
 
var DWObject;
function Dynamsoft_OnReady() {
            DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');    // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
            if (DWObject) {
                if (window.navigator.platform.indexOf("Linux") !== -1) {
                    DWObject.ImageCaptureDriverType = 3;
                }
                     
                var count = DWObject.SourceCount;
                for (var i = 0; i < count; i++)
                    document.getElementById("source").options.add(new Option(DWObject.GetSourceNameItems(i), i)); // Get Data Source names from Data Source Manager and put them in a drop-down box
            }
}

    触发文档扫描：

function AcquireImage() {
            if (DWObject) {
        var OnAcquireImageSuccess, OnAcquireImageFailure;
        OnAcquireImageSuccess = OnAcquireImageFailure = function (){
            DWObject.CloseSource();
        };
                 
                DWObject.SelectSourceByIndex(document.getElementById("source").selectedIndex); //Use method SelectSourceByIndex to avoid the 'Select Source' dialog
                DWObject.OpenSource();
                DWObject.IfDisableSourceAfterAcquire = true;    // Scanner source will be disabled/closed automatically after the scan.
                DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
            }
}

    在Linux上需要设定驱动类型：

DWObject.ImageCaptureDriverType = 3;

5. 创建后端的server.js：

var express = require('express');
var app = express();
 
app.use(express.static(__dirname));
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "X-Requested-With, content-type");
  res.header("Access-Control-Allow-Credentials", true);
  next();
});
 
var server = app.listen(2016, function() {
    var host = server.address().address;
    var port = server.address().port;
    console.log('listening at http://%s:%s', host, port);
});

6. 启动服务：

node server.js

7. 在浏览器中打开网页http://localhost:2016/helloworld.html。以下是不同平台支持的浏览器：

• Windows: IE, Edge, Chrome, Firefox
• Linux: Chrome, Firefox
• macOS: Chrome, Firefox, Safari

源码

https://github.com/yushulx/document-scanning