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 -–savenpm 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