エレクトロンは、HTMLやJavaScript、CSSでクロスプラットフォームのデスクトップアプリケーションを構築するためのフレームワークです。動的Web TWAINは、文書をスキャンするためのクロスプラットフォームのJavaScriptライブラリであるため、Windows、Linux、およびMacOSのための電子の使用は、デスクトップのドキュメントスキャンアプリケーションは非常に簡単です実装します。
インストールの準備：
• 動的Web TWAIN SDK
•電子：
npm install -g electron
使用電子ビルドアプリケーション：
参考資料
電子ドキュメント
アプリケーションの電子構造
は次のような電子アプリケーションが構成されています。
app/
├── package.json
├── main.js
└── index.html
あなたはそれpackage.jsonファイルのNode.jsのモジュールを作成する方法を知っていますか？同じステップ。私が何をしましたか：
{
"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"
}
}
電子は、JavaScriptファイルがプライマリフィールドを指定使用してロードされ。また、あなたは、HTMLやCSSのレンダリングUIを使用するためにindex.htmlを作成する必要があります。電子APIリファレンスを読んだとき、あなたはメインプロセスとレンダリングプロセスを見ることができます。彼らとどのように関連APIを使用する方法は何ですか？
メイン処理電子
マスター・プロセスは、main.jsエントリ・ポイントを実行しています。これは、レンダリングプロセスを作成し、機械要素を管理します。完全なノードAPIが構築されています。
電子レンダリングプロセス
レンダリングプロセスは、index.htmlをブラウザのウィンドウを実行しています。電子は、WebページでのNode.jsのAPIを使用する開発者を可能にします。
ドキュメントスキャンアプリケーション
電子文書によると、我々はそれを読み込むのindex.htmlと使用main.js上のすべての作業をする必要があります。
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();
}
});
アプリケーションを実行します。
アプリケーション配信
アプリケーションを配布するには、2つのステップがあります。
ASARパッケージ・アプリケーションとの最初のステップ、。
npm install -g asar
asar pack your-app app.asar
第二段階は、ダウンロード電子ビルド済みパッケージ Resourcesフォルダへとapp.asar。
彼らはデフォルトでそこに残さできる2つのASARファイルがあります。あなたはelectron.exeは、Windows上でアプリケーションを実行してダブルクリックすることができます。
ソースコード
