1 技术选型
Electron+Vue+tesseract.js
-
Electron 是一个使用 JavaScript, HTML 和 CSS 构建跨平台桌面应用程序的开源库，同时集成 Node.js 以提供强大的本地能力。
-
通过Vue来渲染页面,Vue.js是一个用于构建用户界面的渐进式JavaScript框架。
-
文字识别的主要功能通过tesseract.js来实现。tesseract.js 是一个基于 Tesseract OCR (Optical Character Recognition, 光学字符识别) 的 JavaScript 库，用于从图像中提取文本。它是 Tesseract OCR 引擎的 JavaScript 版本，通过 WebAssembly 技术在浏览器中运行，从而实现高效的图像文本识别。
2 实验效果
这是要识别的图片文字，识别出来有个别错误，但是整体是对的。
3 核心代码
- 页面部分通过vue+elementui实现拖拽功能，通过drop事件获取文件路径，再向electron主进程发送beginOcr事件，由主进程进行图片文字识别
<div id="dropzone" @dragover="$event.preventDefault()" @drop="drop($event)" draggable="true">
<span v-if="!imgUrl"> Drag files here</span>
<img v-else :src="imgUrl" alt="">
</div>
methods: {
// 获取文件路径
drop (ev) {
ev.preventDefault()
this.imgUrl = ev.dataTransfer.files[0].path; // FileList object.
},
// 向electron主进程发送beginOcr事件，由主进程进行图片文字识别
beginOcr () {
ipcRenderer.send('beginOcr', this.imgUrl);
}
},
- 核心代码部分
Electron主进程，引入createWorker方法，创建一个worker处理图像，调用worker.recognize方法，把图片路径传入该方法，进行文字解析识别。执行完方法后，再向渲染进程发送事件，返回解析的文本， event.sender.send('image_text',text);
const { createWorker } = require('tesseract.js');
ipcMain.on('beginOcr', async (event, filePath) => {
console.log(1111,filePath)
const worker = await createWorker('chi_sim');
const { data: { text } } = await worker.recognize(filePath);
console.log(text);
event.sender.send('image_text',text);
await worker.terminate();
})
4 源码地址
后期准备添加新的功能，如处理视频，视频压缩，处理pdf,录屏等等
