Building Cross-platform Document Scanning and Management Application with Electron
Tags: electron, documentmanagement
Published: 2021-06-28 05:24:18

[Electron](https://www.electronjs.org/) is a framework for building cross-platform desktop applicationss with HTML, JavaScript, and CSS. Since [Dynamic Web TWAIN](https://www.dynamsoft.com/web-twain/overview/) 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
- [![](https://img.shields.io/badge/Download-Offline%20SDK-orange)](https://www.dynamsoft.com/web-twain/downloads) 
- [![](https://img.shields.io/badge/Get-30--day%20FREE%20Trial%20License-blue)](https://www.dynamsoft.com/customer/license/trialLicense/?product=dwt) 

## Electron Installation

```bash
npm install -g electron
```

## Reference
- [Electron Documentation](https://electron.atom.io/docs/)
- [Dynamic Web TWAIN APIs](https://www.dynamsoft.com/web-twain/docs/info/api/?ver=latest)

## Electron Application for Document Scanning and Management
Let's get started with [electron-quick-start](https://github.com/electron/electron-quick-start):

```bash
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:

```plain
app/

├── package.json

├── main.js

└── index.html
```

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

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

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

```js
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:

```javascript
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`:

```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](https://www.dynamsoft.com/customer/license/trialLicense/?product=dwt) in `Resources/dynamsoft.webtwain.config.js`:

```javascript
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:

```html
<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:

```javascript
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.

![Electron document scanning and management](https://www.dynamsoft.com/codepool/img/2021/06/electron-document-scanner.png)



## 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](https://github.com/electron/electron/releases) and put **app.asar** into the `recourses` folder. 

    ![electron distribution](https://www.dynamsoft.com/codepool/img/2021/06/electron-application-distribution.PNG)
 
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/electron-document-scan](https://github.com/yushulx/electron-document-scan)