zvue

使用 Tesseract.js 在浏览器中使用 OCR

2023/2/21 tesseract

英文原文 (opens new window) 原文地址 (opens new window)

光学字符识别或光学字符阅读器 (OCR) 是将文本图像转换为机器编码文本的过程。例如，您可以拍摄书页的图片，然后通过 OCR 软件运行它以提取文本。 在这篇博文中，我们将使用Tesseract OCR 库。Tesseract 是用 C/C++ 编写的，最初是在 1985 年到 1994 年间由惠普公司开发的。惠普在 2005 年开源了该软件。从那时起，谷歌一直在开发和维护它。

2018 年 10 月发布的最新版本 4 包含一个新的 OCR 引擎，该引擎使用基于 LSTM 的神经网络系统，这应该会显着提高准确性。版本 4 支持 123 种开箱即用的语言。源代码托管在 GitHub (opens new window)上：

如前所述，Tesseract 引擎是用 C++ 编写的，不能在浏览器中运行。使用 C++ 引擎的唯一方法是将图片从 Web 应用程序发送到服务器，通过引擎运行它并将文本发回。

但是几年来，存在 Tesseract C++ 引擎的 JavaScript 端口，它在浏览器中运行并且不依赖于任何服务器端代码。该库名为 Tesseract.js，您可以在 GitHub (opens new window) 上找到源代码： 该引擎最初是用ASM.js (opens new window)编写的，最近已移植到 WebAssembly。

我们将使用库的第 2 版。版本 2 是 Tesseract 4.1 的 WebAssembly 端口。当浏览器不支持 WebAssembly 时，库会回退到 ASM.js (opens new window)。

# 安装

  • 您可以通过从 CDN 加载 Tesseract.js 将其添加到您的项目中

    <script src='https://unpkg.com/tesseract.js@2.1.4/dist/tesseract.min.js'></script>
    1

  • 或通过安装它npm。

    npm install tesseract.js
    1

# 基本用法

该库提供了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();
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 参数

该recognize方法需要一个图像作为第一个参数。该库支持 bmp、jpg、png 和 pbm 格式的图像。

图像可以提供给方法作为:

  • img, video, 或canvas元素
  • 文件对象（来自文件）
  • Blob 对象
  • 图像的路径或 URL
  • base64 编码的图像

更多信息参见官方文档 (opens new window)

在调用recognize方法之前，您必须使用 来创建工作createWorker()线程，使用 加载 tesseract.js 核心脚本load()，使用 加载一种或多种语言的机器学习模型loadLanguage(...)，最后使用 初始化 Tesseract API initialize(...)。您指定为initialize调用参数的语言可以是您加载的语言的子集loadLanguage()。

下一个示例预先加载英语和西班牙语模型，但随后仅在下一次 API 调用中使用英语。

await worker.loadLanguage('eng+spa');
await worker.initialize('eng');
1
2

稍后在应用程序中，您只需通过另一个initialize(...)调用切换到另一种语言

# 进度

OCR 进程运行几秒钟，如果要向用户显示进度信息，则配置一个进度侦听器。您可以通过将对象作为参数传递给createWorker()调用来做到这一点。该logger属性需要在识别过程中多次调用的函数。

    const worker = Tesseract.createWorker({
      logger: m => console.log(m)
    });
1
2
3

您在 logger 函数中作为参数获得的对象包含工作人员和作业 ID 以及属性status和progress。status是描述当前操作的字符串，progress是一个介于 0 和 1 之间的数字，表示当前进度的百分比。

进度示例：

{workerId: "Worker-0-4d98d", jobId: "Job-0-a37f4", status: "recognizing text", progress: 0.8285714285714286}
1

如果您需要更多内部信息，请将日志记录标志设置为 true。该库然后将更多信息打印到开发人员控制台中：setLogging(true)

# 结果

该recognize()方法返回一个 Promise。您从成功调用中获得的对象包含data保存有关已识别文本的信息的属性。你要么访问文本与text属性，它包含了识别的文本作为一个字符串，或者你通过访问lines，paragraphs，words，或symbols性质。每个组元素都包含一个confidence分数，告诉您引擎的信心程度。分数是一个介于 0 到 100 之间的数字；较高的值表示较高的置信度。


{
  text: "Mild Splendour of the various-vested Nig ..."
  hocr: "<div class='ocr_page' id= ..."
  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) [{...}, {...}, ...]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

当您使用属性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, ...}
}
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

如果要查看完整的结果对象，请访问 URL Basic Usage (opens new window)并打开开发人员控制台。

# 探测

Tesseract.js 库提供的另一种方法是detect(). 此方法尝试检测方向和脚本。像recognize()这个方法需要一个图像作为第一个参数并返回一个 Promise。

  const result = await worker.detect(image);
1

结果对象包含属性data，该属性保存有关检测到的脚本和方向以及相应的置信度分数的信息。

  {
      tesseract_script_id: 1
      script: "Latin"
      script_confidence: 39.58333969116211
      orientation_degrees: 0
      orientation_confidence: 29.793731689453125
  }
1
2
3
4
5
6
7

更多信息参见官方文档 (opens new window)

# 清理

该库在 Web Worker 中运行 OCR 引擎。如果您的应用程序不再需要该工作线程，您应该使用worker.terminate().

# 更多

查看文档页面以获取更多代码示例： (opens new window)

# 演示应用程序

在本节中，我将展示如何将 Tesseract.js 库合并到 Angular/Ionic 应用程序中。

您可以在 GitHub 上找到完整应用程序的源代码 (opens new window)

演示应用程序托管在我的服务器上，您可以通过以下 URL (opens new window) 访问它： 演示应用程序不依赖于任何服务器端代码，OCR 在 Web 浏览器本地运行，不向服务器发送任何数据。 该应用程序基于 Ionic 空白入门模板。首先，我将最新版本的 Tesseract.js 添加npm install tesseract.js到项目中。 在 TypeScript 代码中，我导入了库

import {createWorker, RecognizeResult} from 'tesseract.js';
1

作为输入，应用程序使用类型为 file ( type="file")的输入标记。每次用户选择一个文件时，onFileChange都会调用该方法，该方法从输入标记中提取 File 对象并将其传递给该recognize()方法。

  <input #fileSelector (change)="onFileChange($event)" accept="image/*" style="display: none;"
         type="file">
1
2

# index.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;
  }
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

# index.ts

为了显示结果，我使用了Angular Material (opens new window)项目中的列表元素 (opens new window)。您可以使用命令将 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>Word</th>
        <td *matCellDef="let word" mat-cell> {{word.text}} </td>
      </ng-container>
 
      <ng-container matColumnDef="confidence">
        <th *matHeaderCellDef mat-header-cell>Confidence</th>
        <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# index.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;
  }
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

# 自托管

当您的应用程序创建并初始化 TesseractWorker 时，该库将下载多个文件。

const worker = createWorker({...});
await worker.load();
await worker.loadLanguage(this.language);
await worker.initialize(this.language);
1
2
3
4

默认情况下，这些文件不是打包应用程序的一部分，Tesseract.js 将从 3rd 方服务器下载这些文件。最新版本将下载这些文件：

  1. worker.min.js (opens new window)(56 KB)
  2. tesseract-core.wasm.js (opens new window)(1.0 MB)
  3. eng.traineddata.gz (opens new window) (10.4 MB)

如果应用程序调用该detect()方法，则会下载一个附加文件。

当您编写从本地服务器下载文件要快得多的内部应用程序时，这不是最佳解决方案。或者您希望完全控制所有应用程序资源，而不必担心这些 3rd 方服务器的可用性。如果其中一台服务器不工作，您的应用程序将不再工作。

无论是什么原因，您都可以轻松自托管这些文件。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"
              }
            // ],
1
2
3
4
5
6
7
8
9
10

# angular.json

Angular CLI 负责将这两个文件复制到 build 文件夹。在应用程序中，我们需要告诉 Tesseract.js 它必须从本地目录加载这两个文件，而不是从 unpkg.com 获取它们。

    const worker = createWorker({
      workerPath: 'tesseract-202/worker.min.js',
      corePath: 'tesseract-202/tesseract-core.wasm.js',
      ...
    });
1
2
3
4
5

该库从 tessdata.projectnaptha.com 下载的机器学习模型不能作为 npm 包使用。有不同的方式来自我托管它们。如果您只需要支持几种语言，您可以从 Git 存储库（GitHub - naptha/tessdata: Tesseract Language Trained Data (opens new window)）下载文件，并在构建过程中使用 npm 脚本将它们放入构建文件夹。

请注意，这些文件非常大，每次构建应用程序时下载它们可能需要一些时间。

您可以下载所需的文件并将它们复制到您控制的 HTTP 服务器上，而不是将它们添加到项目中。如果您需要支持多种语言，您可以克隆整个存储库。

git clone https://github.com/naptha/tessdata.git
1

下载所有文件需要 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',
      ...
    });
1
2
3
4
5
6

该库通过组合langPath+ 语言代码 + '.traineddata.gz'创建 URL 更多信息请访问官方文档页面 (opens new window)：

最后更新时间: 2023/2/23 18:24:24