使用 Tesseract.js 在浏览器中进行 OCR
光学字符识别或光学字符阅读器 (OCR) 是将文本图像转换为机器编码文本的过程。例如，您可以为书页拍照，然后通过 OCR 软件运行以提取文本。
在这篇博文中，我们将使用Tesseract OCR 库。Tesseract 是用 C/C++ 编写的，最初是在 1985 年至 1994 年间由惠普开发的。惠普于 2005 年开源了该软件。从那时起，谷歌一直在开发和维护它。
2018 年 10 月发布的最新版本 4 包含一个新的 OCR 引擎，该引擎使用基于 LSTM 的神经网络系统，这应该会显着提高准确性。第 4 版开箱即用支持 123 种语言。源代码托管在 GitHub 上：https ://github.com/tesseract-ocr/tesseract
如前所述，Tesseract 引擎是用 C++ 编写的，并不在浏览器中运行。使用 C++ 引擎的唯一方法是将图片从 Web 应用程序发送到服务器，通过引擎运行它并发送回文本。
但是几年来，Tesseract C++ 引擎的 JavaScript 端口存在，它在浏览器中运行并且不依赖于任何服务器端代码。该库名为 Tesseract.js，您可以在 GitHub 上找到源代码：https
://github.com/naptha/tesseract.js该引擎最初是用ASM.js编写的，最近已移植到 WebAssembly。
我们将使用该库的第 2 版。版本 2 是 Tesseract 4.1 的 WebAssembly 端口。当浏览器不支持 WebAssembly 时，该库回退到 ASM.js。
安装
通过从 CDN 加载 Tesseract.js 将其添加到项目中
或通过安装它npm。
npm install tesseract.js
基本用法
该库提供了recognize将图像作为输入并返回具有识别文本的对象的方法。这里是一个简单的例子
const exampleImage = 'https://tesseract.projectnaptha.com/img/eng_bw.png';
const worker = Tesseract.createWorker({
logger: m => console.log(m)
});
Tesseract.setLogging(true);
work();
async function work() {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
let result = await worker.detect(exampleImage);
console.log(result.data);
result = await worker.recognize(exampleImage);
console.log(result.data);
await worker.terminate();
}
基本的.html
论据
该recognize方法需要一个图像作为第一个参数。该库支持 bmp、jpg、png 和 pbm 格式的图像。
图像可以提供给该方法
img,video, 或canvas元素- 文件对象（来自文件
） - 斑点对象
- 图像的路径或 URL
- base64 编码图像
更多信息参见官方文档：
https ://github.com/naptha/tesseract.js/blob/master/docs/image-format.md
在调用该recognize方法之前，您必须使用 创建一个 worker createWorker()，使用 加载 tesseract.js-core 脚本load()，使用 加载一种或多种语言的机器学习模型loadLanguage(...)，最后使用 初始化 Tesseract API initialize(...)。您指定为initialize调用参数的语言可以是您加载的语言的子集loadLanguage()。
下一个示例预先加载了英语和西班牙语的模型，但随后仅将英语用于下一次 API 调用。
await worker.loadLanguage('eng+spa');
await worker.initialize('eng');
稍后在应用程序中，您只需通过另一个initialize(...)调用切换到另一种语言。
进步
OCR 过程会运行几秒钟，如果您想向用户显示进度信息，您可以配置一个进度侦听器。您可以通过将对象作为参数传递给createWorker()调用来做到这一点。该logger属性需要一个在识别过程中被多次调用的函数。
const worker = Tesseract.createWorker({
logger: m => console.log(m)
});
您在 logger 函数中作为参数获得的对象包含 worker 和 job id 以及属性status和progress. status是一个描述当前操作的字符串，progress是一个介于 0 和 1 之间的数字，以百分比表示当前进度。
进度示例：
{workerId: "Worker-0-4d98d", jobId: "Job-0-a37f4", status: "recognizing text", progress: 0.8285714285714286}
如果您需要更多内部信息，请将日志记录标志设置为 true。然后该库将更多信息打印到开发人员控制台中：setLogging(true)
结果
该recognize()方法返回一个 Promise。您从成功调用中获得的对象包含data保存有关已识别文本的信息的属性。您可以使用text包含已识别文本作为一个字符串的属性访问文本，或者通过lines、paragraphs、words或symbols属性访问它。每个组元素都包含一个confidence分数，可以告诉您引擎的信心程度。分数是一个介于 0 和 100 之间的数字；较高的值表示较高的置信度。
{
text: "Mild Splendour of the various-vested Nig ..."
hocr: "
tsv: "1 1 0 0 0 0 0 0 1486 ..."
box: null
unlv: null
osd: null
confidence: 90
blocks: [{...}]
psm: "SINGLE_BLOCK"
oem: "DEFAULT"
version: "4.0.0-825-g887c"
paragraphs: [{...}]
lines: (8) [{...}, ...]
words: (58) [{...}, {...}, ...]
symbols: (295) [{...}, {...}, ...]
}
当您使用 和 属性访问文本时lines，paragraphs您将获得按行和段落分组的文本。包含一个包含每个已识别单词的words数组，并symbols允许您访问每个字符。
这些属性的每个元素都包含bbox表示边界框的 x/y 坐标的属性。在演示应用程序中，我使用此信息在所选文本周围绘制一个矩形。
words这是数组中元素的示例。该text属性包含单词，并confidence告诉我们置信度分数。line, 并paragraph引用该单词所在的行和段落对象。symbols是一个单独保存每个字符 ( M, i, l, d) 的数组。
{
symbols: Array(4)
0: {choices: Array(1), image: null, text: "M", confidence: 99.03752899169922, baseline: {...}, ...}
1: {choices: Array(1), image: null, text: "i", confidence: 98.83988952636719, baseline: {...}, ...}
2: {choices: Array(1), image: null, text: "l", confidence: 99.01886749267578, baseline: {...}, ...}
3: {choices: Array(1), image: null, text: "d", confidence: 99.0378646850586, baseline: {...}, ...}
choices: [{...}]
text: "Mild"
confidence: 91.87923431396484
baseline: {x0: 38, y0: 84, x1: 167, y1: 85, has_baseline: true}
bbox: {x0: 38, y0: 34, x1: 167, y1: 85}
is_numeric: false
in_dictionary: false
direction: "LEFT_TO_RIGHT"
language: "eng"
is_bold: false
is_italic: false
is_underlined: false
is_monospace: false
is_serif: false
is_smallcaps: false
font_size: 17
font_id: -1
font_name: ""
page: ...
block: ...
paragraph: {lines: Array(8), text: "Mild Splendour ...", confidence: 91.35659790039062, ...}
line: {words: Array(6), text: "Mild Splendour ...", confidence: 92.46450805664062, ...}
}
如果您想查看完整的结果对象，请访问 URL Basic Usage并打开开发者控制台。
探测
Tesseract.js 库提供的另一种方法是detect(). 此方法尝试检测方向和脚本。就像recognize()这个方法需要一个图像作为第一个参数并返回一个 Promise。
const result = await worker.detect(image);
结果对象包含属性data，它包含有关检测到的脚本和方向的信息以及相应的置信度分数。
{
tesseract_script_id: 1
script: "Latin"
script_confidence: 39.58333969116211
orientation_degrees: 0
orientation_confidence: 29.793731689453125
}
更多信息参见官方文档：
https ://github.com/naptha/tesseract.js/blob/master/docs/api.md#worker-detect
清理
该库在 Web Worker 中运行 OCR 引擎。如果您的应用程序不再需要 worker，您应该使用worker.terminate().
更多示例
查看文档页面以获取更多代码示例：
https ://github.com/naptha/tesseract.js/blob/master/docs/examples.md
演示应用
在本节中，我将展示如何将 Tesseract.js 库合并到 Angular/Ionic 应用程序中。
您可以在 GitHub 上找到完整应用程序的源代码：
https ://github.com/ralscha/blog2019/blob/master/webocr
演示应用程序托管在我的服务器上，您可以通过以下 URL 访问它：
https ://omed.hplar.ch/webocr/
演示应用程序不依赖任何服务器端代码，OCR 在 Web 浏览器本地运行，不向服务器发送任何数据。
该应用程序基于 Ionic 空白起始模板。首先，我在项目中添加了最新版本的 Tesseract.js npm install tesseract.js。
在 TypeScript 代码中，我使用
import {createWorker, RecognizeResult} from 'tesseract.js';
type="file"作为输入，应用程序使用类型文件 ( )的输入标记。每次用户选择一个文件时，onFileChange都会调用该方法，该方法从输入标签中提取 File 对象并将其传递给该recognize()方法。
<input #fileSelector (change)="onFileChange($event)" accept="image/*" style="display: none;"
type="file">
主页.html
然后，选定的图片也会加载到 Image 对象中。该应用程序不使用img标签来显示图片。相反，它将图片绘制到画布中。我在这里使用画布，因为每当用户单击文本时，应用程序都会在文本周围绘制矩形。
async onFileChange(event: Event): Promise<void> {
// @ts-ignore
this.selectedFile = event.target.files[0];
this.progressStatus = '';
this.progress = null;
this.result = null;
this.words = null;
this.symbols = null;
this.selectedLine = null;
this.selectedWord = null;
this.selectedSymbol = null;
this.image = new Image();
this.image.onload = () => this.drawImageScaled(this.image);
this.image.src = URL.createObjectURL(this.selectedFile);
/*
const worker = createWorker({
logger: progress => {
this.progressStatus = progress.status;
this.progress = progress.progress;
this.progressBar.set(progress.progress * 100);
this.changeDetectionRef.markForCheck();
}
});
*/
const worker = createWorker({
workerPath: 'tesseract-202/worker.min.js',
corePath: 'tesseract-202/tesseract-core.wasm.js',
logger: progress => {
this.progressStatus = progress.status;
this.progress = progress.progress;
this.progressBar.set(progress.progress * 100);
this.changeDetectionRef.markForCheck();
}
});
await worker.load();
await worker.loadLanguage(this.language);
await worker.initialize(this.language);
this.progressBar.set(0);
try {
if (this.selectedFile) {
const recognizeResult = await worker.recognize(this.selectedFile);
if (recognizeResult) {
this.result = recognizeResult.data;
} else {
this.result = null;
}
await worker.terminate();
}
} catch (e) {
this.progressStatus = e;
this.progress = null;
} finally {
this.progressBar.complete();
this.progressStatus = null;
this.progress = null;
}
// reset file input
// @ts-ignore
event.target.value = null;
}
主页.ts
为了显示结果，我使用了Angular Material 项目中的列表元素。您可以使用该命令将 Angular Material 添加到任何 Angular 项目。ng add @angular/material
这里是单词列表的模板：
<div *ngIf="words" class="table-container mat-elevation-z1 ion-margin-top">
<table [dataSource]="words" mat-table>
<ng-container matColumnDef="text">
<th *matHeaderCellDef mat-header-cell>Wordth>
<td *matCellDef="let word" mat-cell> {{word.text}} td>
ng-container>
<ng-container matColumnDef="confidence">
<th *matHeaderCellDef mat-header-cell>Confidenceth>
<td *matCellDef="let word" mat-cell> {{word.confidence | number:'1.2-2'}} %td>
ng-container>
<tr *matHeaderRowDef="elementColumns; sticky: true" mat-header-row>tr>
<tr (click)="onWordClick(word)" *matRowDef="let word; columns: elementColumns;"
[ngClass]="{'highlight': selectedWord === word}"
mat-row>tr>
table>
div>
主页.html
当用户单击列表项时，应用程序会在所选文本周围绘制一个矩形
drawBBox(bbox: { x0: number, x1: number, y0: number, y1: number }): void {
if (bbox) {
this.redrawImage();
if (this.ratio === null) {
throw new Error('ratio not set');
}
this.ctx.beginPath();
this.ctx.moveTo(bbox.x0 * this.ratio, bbox.y0 * this.ratio);
this.ctx.lineTo(bbox.x1 * this.ratio, bbox.y0 * this.ratio);
this.ctx.lineTo(bbox.x1 * this.ratio, bbox.y1 * this.ratio);
this.ctx.lineTo(bbox.x0 * this.ratio, bbox.y1 * this.ratio);
this.ctx.closePath();
this.ctx.strokeStyle = '#bada55';
this.ctx.lineWidth = 2;
this.ctx.stroke();
}
}
onLineClick(line: Line): void {
this.words = line.words;
this.drawBBox(line.bbox);
this.symbols = null;
this.selectedLine = line;
this.selectedWord = null;
this.selectedSymbol = null;
}
主页.ts
自托管
当您的应用程序创建并初始化 TesseractWorker 时，该库将下载几个文件。
const worker = createWorker({...});
await worker.load();
await worker.loadLanguage(this.language);
await worker.initialize(this.language);
默认情况下，这些文件不是打包应用程序的一部分，Tesseract.js 将从 3rd 方服务器下载这些文件。最新版本将下载这些文件：
- https://unpkg.com/[email protected]/dist/worker.min.js (56 KB)
- https://unpkg.com/[email protected]/tesseract-core.wasm.js (1.0 MB)
- https://tessdata.projectnaptha.com/4.0.0/eng.traineddata.gz (10.4 MB)
如果应用程序调用该detect()方法，将下载一个附加文件。
- https://tessdata.projectnaptha.com/4.0.0/osd.traineddata.gz (4.1 MB)
当您编写从本地服务器下载文件要快得多的内部应用程序时，这不是最佳解决方案。或者您希望完全控制所有应用程序资源，而不用担心这些第 3 方服务器的可用性。如果其中一台服务器不工作，您的应用程序将不再工作。
无论是什么原因，您都可以轻松地自行托管这些文件。Web Worker JavaScript 和 Web Assembly 文件是 Tesseract.js npm 包的一部分，因此我们可以将这两个文件从 node_modules 目录复制到 build 文件夹。在 Angular 应用程序中，您可以通过将以下两个条目添加到 build->options->assets 数组来完成此操作。
"glob": "worker.min.js",
"input": "node_modules/tesseract.js/dist/",
"output": "./tesseract-202"
},
{
"glob": "tesseract-core.wasm.js",
"input": "node_modules/tesseract.js-core/",
"output": "./tesseract-202"
}
],
角.json
Angular CLI 负责将这两个文件复制到构建文件夹。在应用程序中，我们需要告诉 Tesseract.js 它必须从本地目录加载这两个文件，而不是从 unpkg.com 获取它们。
const worker = createWorker({
workerPath: 'tesseract-202/worker.min.js',
corePath: 'tesseract-202/tesseract-core.wasm.js',
...
});
该库从 tessdata.projectnaptha.com 下载的机器学习模型不作为 npm 包提供。有不同的方式来自行托管它们。如果您只需要支持几种语言，您可以从 Git 存储库 ( GitHub - naptha/tessdata: Tesseract Language Trained Data ) 下载文件，并在构建过程中使用 npm 脚本将它们放入构建文件夹。
请注意，这些文件非常大，每次构建应用程序时下载它们可能需要一些时间。
您可以下载所需的文件并将它们复制到您控制的 HTTP 服务器上，而不是将它们添加到项目中。如果您需要支持多种语言，您可以克隆整个存储库。
git clone https://github.com/naptha/tessdata.git
下载所有文件需要 4.8 GB 的磁盘空间！
每种语言都提供三种不同的版本：正常、快速和最佳。最好的版本为您提供更高的 OCR 准确性，但缺点是您的应用程序必须下载更大的机器学习模型文件。对于英语，最佳文件大小为 12.2 MB，普通 10.4 MB，快速 1.89 MB。
与 Web Worker 文件一样，您需要在作为参数传递给createWorker.
const worker = createWorker({
workerPath: 'tesseract-202/worker.min.js',
corePath: 'tesseract-202/tesseract-core.wasm.js',
langPath: 'https://myserver/4.0.0',
...
});
该库通过组合langPath+ 语言代码 + '.traineddata.gz'创建 URL
更多信息请访问官方文档页面：
https ://github.com/naptha/tesseract.js/blob/master/docs/local-installation.md