ElectronOCR:基于Electron+React+Tesseract的MACOS下的OCR工具IntroductionWeb部分Native部分

98 阅读 0 评论 65 点赞

我是靠谱客的博主外向月饼，这篇文章主要介绍 ElectronOCR:基于Electron+React+Tesseract的MACOS下的OCR工具IntroductionWeb部分Native部分，现在分享给大家，希望可以做个参考。

Github Repo 地址
文章地址
MAXOS Darwin x64下载

笔者一直在MacOS上没找到太顺心的OCR工具,导致看书的时候很多东西只能手打,略烦。正好前段时间用了Tesseract,就用Electron封装了一个,这里简要记述下开发当中的一些坑和要点,日后有空把Electron整理好也出个系列

Introduction

这东西,大概是这个样子:

现在本机上安装个Tesseract:

复制代码

1
2
brew install imagemagick
brew install tesseract --all-languages

然后直接下载打开即可。

Development

Setup

use npm install or npm link to install dependences
use npm install -g electron-prebuilt to enable the global electron

Develop & Hot-Reloading

use npm start to start webpak hot-middle server
use npm run electron-test to use electron and set env to development

Package

use npm run buildto generate list file for web modules
usenpm run package-osx to build and package into dmg

Web部分

笔者Web部分还是采用Webpack+React+Redux(待加入)，关于这部分的单独代码可以借鉴我的Webpack套装以及Webpack-React-Redux-Boilerplate这个示范Boilerplate。需要注意的是，在Electron 1.x之后API和0.x系列有了较大的变化，很多Github上的项目在升级到1.2.0之后不可用。

支持Hot Reload的环境搭建

Electron实际上是一个封装好的近似浏览器，因此Hot Reload与纯粹的Web开发区别不大，都是先起一个Hot Load Server，监听3000端口。不过需要做修改的是，在Electron中所有的脚本都要从localhost:3000加载，主要修改有：

复制代码

1
2
3
4
5
6
7
var devEntry = [
'eventsource-polyfill',
//修改WHM的默认加载地址
`webpack-hot-middleware/client?path=http://localhost:${port}/__webpack_hmr`,
];
//修改默认的公共路径前缀
config.output.publicPath = `http://localhost:${port}/dist/`//公共目录名

在dev.html中也需要修改下加载的脚本的地址：

复制代码

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>Index For Debug</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="root"></div>
</body>
</html>
<script src="http://localhost:3000/dist/vendors.bundle.js"></script>
<script src="http://localhost:3000/dist/main.bundle.js"></script>

在渲染进程中引入本地模块

复制代码

1
2
const {dialog} = window.require('electron').remote;
const fs = window.require("fs");

首先为了避免Webpack在打包时报错electron不存在，建议是将所有Node或者Electron提供的模块用window.require方式，这样Webpack会忽略引入。

Native部分

创建本地窗口

复制代码

/**
* Created by apple on 16/6/3.
*/
const electron = require('electron');
// 用于控制应用生命周期
const {app} = electron;
// 用于创建本地窗口
const {BrowserWindow} = electron;
//为Window对象创建一个全局的引用,否则可能被JavaScript的垃圾回收机制自动回收
let win;
/**
* @function 创建窗口
*/
function createWindow() {
// 创建类似于浏览器的窗口
win = new BrowserWindow({width: 800, height: 600});
// 加载应用入口文件,本文件为测试文件,因此加载的是测试
win.loadURL(`file://${__dirname}/dist/app.html`);
// 启动调试工具,如果是开发环境下则不需要开启
// win.webContents.openDevTools();
// 设置窗口关闭事件
win.on('closed', () => {
//因为上面是设置了一个全局引用,因此这里需要对该对象解除引用
//如果你的应用支持打开多窗口,可以把所有的引用存入一个数组中,然后在这里动态删除
win = null;
});
}
// 在基本环境准备好之后的回调
app.on('ready', createWindow);
// 所有窗口都关闭之后的回调
app.on('window-all-closed', () => {
//在OSX中经常是用户虽然关闭了主窗口,但是仍然希望使用Menu Bar,因此这里不进行强行关闭
// 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', () => {
// 在Dock中的Menu Bar被点击之后重新激活应用
if (win === null) {
createWindow();
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
* Created by apple on 16/6/3.
*/
const electron = require('electron');
// 用于控制应用生命周期
const {app} = electron;
// 用于创建本地窗口
const {BrowserWindow} = electron;
//为Window对象创建一个全局的引用,否则可能被JavaScript的垃圾回收机制自动回收
let win;
/**
* @function 创建窗口
*/
function createWindow() {
// 创建类似于浏览器的窗口
win = new BrowserWindow({width: 800, height: 600});
// 加载应用入口文件,本文件为测试文件,因此加载的是测试
win.loadURL(`file://${__dirname}/dist/app.html`);
// 启动调试工具,如果是开发环境下则不需要开启
// win.webContents.openDevTools();
// 设置窗口关闭事件
win.on('closed', () => {
//因为上面是设置了一个全局引用,因此这里需要对该对象解除引用
//如果你的应用支持打开多窗口,可以把所有的引用存入一个数组中,然后在这里动态删除
win = null;
});
}
// 在基本环境准备好之后的回调
app.on('ready', createWindow);
// 所有窗口都关闭之后的回调
app.on('window-all-closed', () => {
//在OSX中经常是用户虽然关闭了主窗口,但是仍然希望使用Menu Bar,因此这里不进行强行关闭
// 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', () => {
// 在Dock中的Menu Bar被点击之后重新激活应用
if (win === null) {
createWindow();
}
});

打包

一般来说，Electron推荐的打包方式有三种，这里笔者使用的是electron-packager这个便捷工具，不过碰到一个蛋疼的问题是Electron一直下载不下来，挂了SS加上proxychains4都不行。因此最终还是用编程方式进行打包：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
require('babel-polyfill');
const exec = require('child_process').exec;
const argv = require('minimist')(process.argv.slice(2));
const platform = argv._[0];//编译的目标平台
const packager = require('electron-packager');
console.log("Current NODE_ENV = " + process.env.NODE_ENV);//判断编译时环境
const arch = "x64";
packager({
dir: "./",
platform,
arch,
out: `release/`,
override: true,
prune: true,
download: {
mirror: "https://npm.taobao.org/mirrors/electron/" //设定Electron的下载地址
}
}, function done_callback(err, appPaths) { /* … */
});

然后将脚本封装到package.json中：

复制代码

1
"package-osx": "npm run clean-electron && NODE_ENV=production node -r babel-register package.js darwin",

避免打包node_modules

在Web开发中我们会将譬如React、Redux等等依赖项加入到package.json的dependencies中，不过Electron Packager会将node_modules也打包到应用中。然后代码都已经通过Webpack打包编译到统一的js脚本中，因此首先可以设置prune为true，这样可以避免打包所有的dev-dependencies。同样，我们也需要将非本地模块全部放到dev-dependencies中。

最后

以上就是外向月饼最近收集整理的关于 ElectronOCR:基于Electron+React+Tesseract的MACOS下的OCR工具IntroductionWeb部分Native部分的全部内容，更多相关内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：javascript
浏览次数：98 次浏览
发布日期：2023-12-14 23:25:12
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_2_fw_13__7__14_2.html

ElectronOCR:基于Electron+React+Tesseract的MACOS下的OCR工具IntroductionWeb部分Native部分

Introduction

Development

Setup

Develop & Hot-Reloading

Package

Web部分

支持Hot Reload的环境搭建

在渲染进程中引入本地模块

Native部分

创建本地窗口

打包

避免打包node_modules

最后

评论列表共有 0 条评论

发表评论取消回复

ElectronOCR:基于Electron+React+Tesseract的MACOS下的OCR工具IntroductionWeb部分Native部分

Introduction

Development

Setup

Develop & Hot-Reloading

Package

Web部分

支持Hot Reload的环境搭建

在渲染进程中引入本地模块

Native部分

创建本地窗口

打包

避免打包node_modules

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复