JavaScript Document Scanning for Windows, Linux and macOS

Published in

Frontend Weekly

2 min readSep 6, 2016

Have you ever imagined to build a JavaScript document scanning solution for Windows, Linux, and macOS from one single codebase? To make it, you need to find a solution that compatible with different scanner driver types: TWAIN for Windows, SANE for Linux, TWAIN and ICA for macOS. Recently, Dynamsoft released the beta version of Dynamic Web TWAIN for Linux. The JavaScript document scanning SDK finally supports all desktop operating systems — Windows, Linux, and macOS. In this article, I will illustrate how to quickly create a basic cross-platform document scanning app with Dynamic Web TWAIN JavaScript library.

JavaScript Document Scanning with Node.js

Download Node.js installer.
Create a new project document-scanning. Initialize the project with the following command:

npm init

3. Download Express and Dynamic Web TWAIN:

npm install express — save
npm install dwt — save

4. Create an HTML document for front-end.
To initialize Dynamic Web TWAIN object, include:

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

Change the resource path in node_modules/dwt/dist/dynamsoft.webtwain.config.js:

Dynamsoft.WebTwainEnv.ResourcesPath = ‘<Resource Directory>’;

Dynamsoft.WebTwainEnv.RegisterEvent(‘OnWebTwainReady’, Dynamsoft_OnReady);
var DWObject;
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain(‘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));
}
}

Trigger document scanning:

function AcquireImage() {
if (DWObject) {
var OnAcquireImageSuccess, OnAcquireImageFailure;
OnAcquireImageSuccess = OnAcquireImageFailure = function (){
DWObject.CloseSource();
};
DWObject.SelectSourceByIndex(document.getElementById(“source”).selectedIndex);
DWObject.OpenSource();
DWObject.IfDisableSourceAfterAcquire = true;
DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
}
}

To make code work on Linux, you need to specify the driver type:

DWObject.ImageCaptureDriverType = 3;

5. Create server.js for back-end:

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. Start the server: