Electrón es un marco para la creación de aplicaciones de escritorio multiplataforma con HTML, JavaScript y CSS. Debido Dynamic Web TWAIN es una biblioteca JavaScript multiplataforma para la digitalización de documentos, el uso de electrones para Windows, Linux y MacOS implementar una aplicación de escaneo de documentos de escritorio es muy fácil.
Preparación de la instalación:
• Dinámico Web TWAIN SDK
• Electrón:
npm install -g electron
Use aplicaciones de generación de electrones:
Documento de Referencia
de documentación electrónica
Estructura electrónica de la solicitud de
una aplicación de electrones está estructurado de la siguiente manera:
app/
├── package.json
├── main.js
└── index.html
¿Usted sabe cómo escribir módulo de Node.js para el archivo package.json ella? Paso idénticos. Lo que hice:
{
"name": "docscanner",
"version": "1.0.0",
"description": "Cross-platform document scanning application for Windows, Linux and macOS",
"main": "main.js",
"scripts": {
"start": "electron main.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/yushulx/electron-document-scan.git"
},
"keywords": [
"Dynamsoft",
"document scan",
"web twain",
"SDK"
],
"author": "yushulx",
"homepage": "http://www.dynamsoft.com/Products/WebTWAIN_Overview.aspx",
"devDependencies": {
"electron-prebuilt": "^1.6.1"
}
}
Electrón cargado mediante el uso de archivos JavaScript especifican el campo primario. Además, es necesario crear index.html utilizar HTML y CSS interfaz de usuario de renderizado. Cuando la lectura electrónica de referencia de la API, puede ver el proceso de proceso principal y renderizado. ¿Qué son y cómo utilizar la API relevante?
La electrónica de proceso principal
proceso maestro se está ejecutando main.js punto de entrada. Se crea el proceso de renderización y gestionar los elementos de la máquina. API completa Nodo se construye.
proceso de representación electrónica
del proceso de renderizado se ejecuta ventana del navegador index.html. Electrónica permite a los desarrolladores usar API Node.js en una página Web.
aplicación para escanear documentos
Electrones Según el documento, sólo tenemos que todos los trabajos en los main.js index.html y uso cargarlo.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document Scanner</title>
<script type="text/javascript" src="http://www.dynamsoft.com/library/dwt/dynamsoft.webtwain.min.js"></script>
<style>
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
text-align: center
}
table {
margin: auto;
}
</style>
</head>
<body>
<h1>
Document Scanner
</h1>
We are using node
<script>
document.write(process.versions.node)
</script>, Chrome
<script>
document.write(process.versions.chrome)
</script>, and Electron
<script>
document.write(process.versions.electron)
</script>.
<table>
<tr>
<td>
<!-- dwtcontrolContainer is the default div id for Dynamic Web TWAIN control.
If you need to rename the id, you should also change the id in dynamsoft.webtwain.config.js accordingly. -->
<div id="dwtcontrolContainer"></div>
</td>
</tr>
<tr>
<td>
<input type="button" value="Scan" "scanImage();" />
<input type="button" value="Load" "loadImage();" />
<input type="button" value="Save" "saveImage();" />
</td>
</tr>
</table>
<script type="text/javascript">
var console = window['console'] ? window['console'] : {
'log': function() {}
};
Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady); // Register OnWebTwainReady event. This event fires as soon as Dynamic Web TWAIN is initialized and ready to be used
var DWObject;
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
if (DWObject) {
DWObject.RegisterEvent('OnPostAllTransfers', SaveWithFileDialog);
}
}
function scanImage() {
if (DWObject) {
var bSelected = DWObject.SelectSource();
if (bSelected) {
var OnAcquireImageSuccess, OnAcquireImageFailure;
OnAcquireImageSuccess = OnAcquireImageFailure = function() {
DWObject.CloseSource();
};
DWObject.OpenSource();
DWObject.IfDisableSourceAfterAcquire = true; // Scanner source will be disabled/closed automatically after the scan.
DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
}
}
}
//Callback functions for async APIs
function OnSuccess() {
console.log('successful');
}
function OnFailure(errorCode, errorString) {
alert(errorString);
}
function loadImage() {
if (DWObject) {
DWObject.IfShowFileDialog = true; // Open the system's file dialog to load image
DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure); // Load images in all supported formats (.bmp, .jpg, .tif, .png, .pdf). OnSuccess or OnFailure will be called after the operation
}
}
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);
}
}
}
</script>
</body>
</html>
main.js
'use strict';
const { app, BrowserWindow } = require('electron');
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({ width: 480, height: 640, resizable: false });
// and load the index.html of the app.
mainWindow.loadURL('file://' + __dirname + '/index.htm');
// Open the DevTools.
// mainWindow.webContents.openDevTools();
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', function() {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function() {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow();
}
});
Ejecutar la aplicación
Entrega de Aplicaciones
Para distribuir la aplicación, hay dos pasos:
El primer paso, con aplicaciones asar envasados.
npm install -g asar
asar pack your-app app.asar
El segundo paso, descarga de electrones paquete precompilado y app.asar en la carpeta Recursos.
Hay dos archivos de asar, pueden ser dejados allí por defecto. Puede hacer doble clic en electron.exe ejecutar la aplicación en Windows.
Código fuente
