DEV Community

Xiao Ling
Xiao Ling

Posted on • Edited on • Originally published at dynamsoft.com

Building Cross-platform Document Scanning and Management Application with Electron

#electron #documentmanagement

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Here is the basic structure of an Electron project:

app/

├── package.json

├── main.js

└── index.html
Enter fullscreen mode Exit fullscreen mode

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

"main": "main.js",
"scripts": {
    "start": "electron main.js"
},
Enter fullscreen mode Exit fullscreen mode

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

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

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 });
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Dynamsoft.DWT.ProductKey = 'LICENSE-KEY';
Enter fullscreen mode Exit fullscreen mode

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();" />
Enter fullscreen mode Exit fullscreen mode

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);
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Electron document scanning and management

Application Distribution

To distribute the Electron project:

  1. Pack the app with asar.

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

  2. Download Electron prebuilt package and put app.asar into the recourses folder.

    electron distribution

  3. Double-click electron.exe to check whether your application can run successfully.

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

Top comments (0)

Read next

junissen9 profile image

Web is like Confluence

Junissen -

sharminshanta profile image

API Throttling

Sharmin Shanta -

biostate profile image

How to Trigger Another Action in FilamentPHP

Süleyman Özgür Özarpacı -

camilaferreiranas profile image

Padrões de projeto: Builder

Camila Ferreira -