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
Top comments (0)