Building Cross-platform Document Scanning and Management Application with Electron

Electron is a framework for building cross-platform desktop applicationss with HTML, JavaScript, and CSS. Since Dynamic Web TWAIN is also a cross-platform JavaScript library for document scanning and management, we can combine Electron and Dynamic Web TWAIN to implement a desktop document scanning and management application for Windows, Linux, and macOS.

What You Should Know About Dynamic Web TWAIN

Electron Installation

npm install -g electron

Reference

Electron Application for Document Scanning and Management

Let's get started with electron-quick-start:

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

Here is the basic structure of an Electron project:

app/

├── package.json

├── main.js

└── index.html

The main.js file is the entry point of Electron defined in the package.json file:

"main": "main.js",
"scripts": {
    "start": "electron main.js"
},

The index.html file is loaded in the main.js file:

mainWindow.loadURL('file://' + __dirname + '/index.htm');
// or
mainWindow.loadFile('index.html');

Although the default code works fine, if you want to make the window bigger and resizable, you can change the code:

mainWindow = new BrowserWindow({ width: 1024, height: 1024, resizable: true });

To implement document scanning and document management, We just need to put some efforts into the HTML5 code in index.html. There is no difference comparing to building a web application.

The JavaScript library files of Dynamic Web TWAIN are in the Dynamic Web TWAIN SDK <version number>\Resources folder. So we copy the folder to the Electron project, and then include the *.js files in index.html:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document Scanner</title>
    <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
    <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
</head>

To make the SDK work, we must set the license string in Resources/dynamsoft.webtwain.config.js:

Dynamsoft.DWT.ProductKey = 'LICENSE-KEY';

We create a select element for selecting connected document scanners, a div element as the document image container, and three buttons for scanning, loading and saving images:

<select size="1" id="source"></select>
<div id="dwtcontrolContainer"></div>
<input type="button" value="Scan" onclick="scanImage();" />
<input type="button" value="Load" onclick="loadImage();" />
<input type="button" value="Save" onclick="saveImage();" />

The following JavaScript code implementation includes the initialization of Dynamic Web TWAIN object and the corresponding button events:

window.onload = function () {
    Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);
};

var DWObject;

function Dynamsoft_OnReady() {
    DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');
    DWObject.Width = 640;
    DWObject.Height = 640;
    if (DWObject) {
        var count = DWObject.SourceCount;
        for (var i = 0; i < count; i++)
            document.getElementById("source").options.add(new Option(DWObject.GetSourceNameItems(i), i));
    }
}

function scanImage() {
    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);
    }
}

function loadImage() {
    if (DWObject) {
        DWObject.IfShowFileDialog = true; 
        DWObject.LoadImageEx("", Dynamsoft.DWT.EnumDWT_ImageType.IT_ALL, function OnSuccess() {}, function OnFailure () {});
    }
}

function saveImage() {
    if (DWObject) {
        if (DWObject.HowManyImagesInBuffer > 0) {
            DWObject.IfShowFileDialog = true;
            if (DWObject.GetImageBitDepth(DWObject.CurrentImageIndexInBuffer) == 1) {
                DWObject.ConvertToGrayScale(DWObject.CurrentImageIndexInBuffer);
            }
            DWObject.SaveAsJPEG("DynamicWebTWAIN.jpg", DWObject.CurrentImageIndexInBuffer);
        }
    }
}

Now save the changes and reload the UI. A simple desktop document scanning application is done.

Application Distribution

To distribute the Electron project:

Pack the app with asar.

npm install -g asar
asar pack your-app app.asar

Download Electron prebuilt package and put app.asar into the recourses folder.
Double-click electron.exe to check whether your application can run successfully.
Compress the whole folder into a zip file for distribution.

Source Code

https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/electron

Blog