44
Building Cross-platform Document Scanning and Management Application with Electron
npm install -g electronLet's get started with electron-quick-start:
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm startHere is the basic structure of an Electron project:
app/
├── package.json
├── main.js
└── index.htmlThe
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>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.
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.
44