JavaScript文档扫描

两盒软妹~` 提交于 2019-12-07 08:56:39

不同的操作系统,底层使用的扫描仪驱动是不同的。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安装ExpressDynamic 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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!