tesseract.js開源：純前端OCR最強利器！

大家好，很高興又見面了，我是"進階前端‬進階‬"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!

今天給大家帶來的主題是 tesseract.js，即支援 100 多種語言的純 Javascript OCR（Optical Character Recognition，即光符識别）工具。話不多說，直接進入正題。

1.什麼是 Tesseract

Tesseract 最初是在 1985 年至 1994 年間在英國布裡斯托爾惠普實驗室和美國科羅拉多州格裡利的惠普公司開發的，1996 年進行一些更改以移植到 Windows，并在 1998 年進行了一些 C++ 化。2005 年 Tesseract 由 HP 開源， 從 2006 年到 2018 年 11 月由谷歌開發。

Tesseract 的主要版本 5 是目前的穩定版本，從 2021 年 11 月 30 日的 5.0.0 版開始，最新的源代碼可從 GitHub 上的主要分支獲得。

Tesseract 軟體包包含一個 OCR 引擎 libtesseract 和一個指令行程式 tesseract。

圖檔來自：https://www.klippa.com/en/blog/information/tesseract-ocr/

Tesseract 4 添加了一個新的基于神經網絡 (LSTM) 的 OCR 引擎，該引擎專注于線條識别，但也仍然支援 Tesseract 3 的遺留 Tesseract OCR 引擎，該引擎通過識别字元模式來工作。 通過使用舊版 OCR 引擎模式 (--oem 0) 啟用與 Tesseract 3 的相容性。 它還需要支援舊引擎的訓練資料檔案，例如來自 tessdata 存儲庫的資料檔案。

• Tesseract 具有 unicode (UTF-8) 支援，可以“開箱即用”地識别 100 多種語言。
• Tesseract 支援各種圖像格式，包括 PNG、JPEG 和 TIFF。
• Tesseract 支援多種輸出格式：純文字、hOCR (HTML)、PDF、僅不可見文本的 PDF、TSV 和 ALTO（最後一種 - 自版本 4.1.0 起）。

需要注意的是，在大多數情況下為了獲得更好的 OCR 結果，開發者需要提高提供給 Tesseract 的圖像品質，同時該項目不包括 GUI 應用程式。

目前 Tesseract 在 Github 上通過Apache-2.0 license開源，有超過51.5k的star、8.6k的fork、代碼貢獻者160+，是一個妥妥的優質開源項目。

2.什麼是Tesseract.js

Tesseract.js 是當下最流行的 Tesseract OCR 引擎的純 Javascript 端口。

該庫支援 100 多種語言、自動文本方向和腳本檢測、用于閱讀段落、單詞和字元邊界框的簡單界面。 Tesseract.js 可以在浏覽器中運作，也可以在帶有 NodeJS 的伺服器上運作。Tesseract.js 隻是圖檔識别、及時視訊識别等諸多優秀特性。

本質上，Tesseract.js 是包裝了 Tesseract OCR 引擎的 webassembly 端口。它在浏覽器中使用 webpack 或帶有 CDN 的純腳本标簽，在伺服器上使用 Node.js。安裝後，使用起來也是非常簡單：

import Tesseract from 'tesseract.js';

Tesseract.recognize(
  'https://tesseract.projectnaptha.com/img/eng_bw.png',
  'eng',
  { logger: m => console.log(m) }
).then(({ data: { text } }) => {
  console.log(text);
})           

或者使用 worker（推薦用于生産）：

import { createWorker } from 'tesseract.js';

const worker = await createWorker({
  logger: m => console.log(m)
});

(async () => {
  await worker.loadLanguage('eng');
  await worker.initialize('eng');
  const { data: { text } } = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
  console.log(text);
  await worker.terminate();
})();           

也可以通過如下CDN引用Tesseract.js：

<!-- v4 -->
<script src='https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js'></script>           

目前 Tesseract.js 在Github上通過Apache-2.0 license開源，有超過30.7k的star、2.1k的fork、10.2k的項目依賴量，代碼貢獻者70+，是一個妥妥的前端優質開源項目。

3.Tesseract.js三種模式

Tesseract.js 提供 3 種不同的文本識别方式，複雜程度各不相同。 這允許 Tesseract.js 為試驗 Tesseract.js 的新使用者提供易用性，同時為更有經驗的使用者提供精确控制和性能調節。

3.1 單函數模式

通過使用 Tesseract.recognize，開發者可以僅使用 1 個函數和 2 個參數（圖像和語言）來識别文本，這使得新使用者可以輕松地體驗 Tesseract.js。

Tesseract.recognize(
  'https://tesseract.projectnaptha.com/img/eng_bw.png',
  'eng'
).then(({ data: { text } }) => {
  console.log(text);
})           

在生産代碼中通常應盡量避免使用此模式，每當運作 Tesseract.recognize 時都會建立一個新的 worker 并加載語言資料，比較低效。

3.2 使用worker

Tesseract.js 還支援手動建立和管理 worker（執行識别的對象）。

(async () => {
    const worker = await Tesseract.createWorker();
    await worker.loadLanguage('eng');
    await worker.initialize('eng');
    const { data: { text } } = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
    console.log(text);
    await worker.terminate();
})();           

這種模式并不比編寫的 Tesseract.recognize 示例更有效（在這兩種情況下，都會建立和銷毀一個 worker 來識别單個圖像）。 然而，在實際應用程式的上下文中，将 建立工作程式和加載資料與運作識别作業分開，為開發人員提供了編寫更高效代碼所需的控制權：

• Worker 可以提前準備，可以在首次加載頁面時建立 worker 并加載語言資料，而不是等待使用者上傳圖像來識别
• Worker 可以重複用于多個識别工作，而不是建立一個新的 worker 并為每個識别的圖像加載語言資料（如 Tesseract.recognize 所做的那樣）

3.3 使用排程器 + Woker

Tesseract.js 支援排程程式，排程程式是一個包含多個 Worker 程式的對象用于并行執行作業。

const scheduler = Tesseract.createScheduler();
//建立Worker并添加到排程程式
const workerGen = async () => {
  const worker = await Tesseract.createWorker();
  await worker.loadLanguage('eng');
  await worker.initialize('eng');
  scheduler.addWorker(worker);
}

const workerN = 4;
(async () => {
  const resArr = Array(workerN);
  for (let i=0; i<workerN; i++) {
    resArr[i] = workerGen();
  }
  await Promise.all(resArr);
  /** 添加幾個識别任務 */
  const results = await Promise.all(Array(10).fill(0).map(() => (
    scheduler.addJob('recognize', 'https://tesseract.projectnaptha.com/img/eng_bw.png').then((x) => console.log(x.data.text))
  )))
  await scheduler.terminate(); 
  // 終止所有Worker
})();           

雖然使用排程程式對于單個 Worker 的效率并不高，但它們允許快速并行執行大量作業。

使用排程程式時，請注意添加到同一排程程式的 Worker 應該都是同質的，即使用相同的語言配置相同的參數。 排程程式以非确定性方式将工作配置設定給 Worker，是以如果 Worker 不相同，則識别結果将取決于工作配置設定給哪個 Worker。

4.Tesseract.js 的三個主要版本

Tesseract.js v4 版本的主要變化包括：

• 添加了旋轉預處理選項（Rotation Preprocessing Pptions）（包括自動旋轉）以顯著提高準确性
• 可以檢索處理過的圖像（旋轉、灰階、二進制）、改進了對并行處理（排程程式）的支援
• createWorker 支援異步的、getPDF 函數替換為 pdf 識别選項

Tesseract.js v3 的主要變化包括：

• 顯著更快的性能，識别示例圖像時，浏覽器的運作時間減少了 84%，Node.js 的運作時間減少了 96%
• 更新到 Tesseract v5.1.0（使用 emscripten 3.1.18）
• 為支援的裝置添加了支援 SIMD 的建構
• 添加 Node.js 版本 18支援
• 删除 ASM.js 版本，任何其他舊版本的 Tesseract.js-core (<3.0.0)、Node.js 版本 10 和 12的支援

Tesseract.js v2 版本的主要變化包括：

• 更新到 tesseract v4.1.1（上遊使用 emscripten 1.39.10）
• 同時支援多種語言，eg: eng+chi_tra for English and Traditional Chinese
• 支援的圖像格式：png、jpg、bmp、pbm
• 支援 WebAssembly（當浏覽器不支援時回退到 ASM.js）和 TypeScript

5.本文總結

本文主要和大家介紹 tesseract.js，即支援 100 多種語言的純 Javascript OCR工具。相信通過本文的閱讀，大家對 tesseract.js 會有一個初步的了解。

因為篇幅有限，關于 tesseract.js 的更多用法和特性文章并沒有過多展開，如果有興趣，可以在我的首頁繼續閱讀，同時文末的參考資料提供了大量優秀文檔以供學習。最後，歡迎大家點贊、評論、轉發、收藏，您的支援是我不斷創作的動力。

參考資料

https://github.com/tesseract-ocr/tesseract

https://github.com/naptha/tesseract.js

https://github.com/naptha/tesseract.js/blob/master/docs/intro.md

https://nanonets.com/blog/ocr-with-tesseract/

https://www.klippa.com/en/blog/information/tesseract-ocr/

封面圖：來自