ElectronOCR:基於Electron+React+Tesseract的MACOS下的OCR工具

時間 2019-11-07

標籤 electronocr 基於 electron+react+tesseract electron react tesseract macos ocr 工具欄目 React 简体版

原文原文鏈接

Github Repo 地址
 文章地址
 MAXOS Darwin x64下載javascript

筆者一直在MacOS上沒找到太順心的OCR工具,致使看書的時候不少東西只能手打,略煩。正好前段時間用了Tesseract,就用Electron封裝了一個,這裏簡要記述下開發當中的一些坑和要點,往後有空把Electron整理好也出個系列html

Introduction

這東西,大概是這個樣子:
java

如今本機上安裝個Tesseract:node

brew install imagemagick
brew install tesseract --all-languages

而後直接下載打開便可。webpack

Development

Setup

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

Develop & Hot-Reloading

use npm start to start webpak hot-middle serverweb
use npm run electron-test to use electron and set env to developmentnpm

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加載，主要修改有：

var devEntry = [
    'eventsource-polyfill',
    //修改WHM的默認加載地址
    `webpack-hot-middleware/client?path=http://localhost:${port}/__webpack_hmr`,
];
//修改默認的公共路徑前綴
config.output.publicPath = `http://localhost:${port}/dist/`//公共目錄名

在dev.html中也須要修改下加載的腳本的地址：

<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>

在渲染進程中引入本地模塊

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();
    }
});

打包

通常來講，Electron推薦的打包方式有三種，這裏筆者使用的是electron-packager這個便捷工具，不過碰到一個蛋疼的問題是Electron一直下載不下來，掛了SS加上proxychains4都不行。所以最終仍是用編程方式進行打包：

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中：

"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中。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。