快捷導航

Tesseract.js使用純js實現(xiàn)的OCR文字識別

更新時間：2023年10月21日 11:30:36 投稿：yin

Tesseract.js是流行的Tesseract OCR引擎的純Javascript端口,這個庫支持100多種語言,自動文本定位和腳本檢測,一個簡單的界面,用于閱讀段落、單詞和字符邊界框,Tesseract.js既可以在瀏覽器中運行,也可以在帶有NodeJS的服務(wù)器上運行

Tesseract.js是流行的Tesseract OCR引擎的純Javascript端口。這個庫支持100多種語言，自動文本定位和腳本檢測，一個簡單的界面，用于閱讀段落、單詞和字符邊界框。Tesseract.js既可以在瀏覽器中運行，也可以在帶有NodeJS的服務(wù)器上運行。

Tesseract簡介

Tesseract 的最新版本第 4 版于 2018 年 10 月發(fā)布，它包含一個新的 OCR 引擎，該引擎使用基于長短期記憶(LSTM) 的神經(jīng)網(wǎng)絡(luò)系統(tǒng)，旨在產(chǎn)生更準確的結(jié)果。

Tesseract.js 一個幾乎能識別出圖片中所有語言的JS庫。

官網(wǎng)：http://tesseract.projectnaptha.com/

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

使用方法

先安裝好tesseract

npm安裝命令：npm install tesseract.js
安裝好tesseract后，在node_modules中會出現(xiàn)兩個文件夾

使用script標簽導入js

從tesseract.js文件夾中獲取tesseract.min.js和work.min.js兩個文件

從tesseract.js-core文件夾中獲取tesseract-core.wasm.js文件

準備一張帶有文字的圖片

提取圖片文字

在不設(shè)置語言的情況下，默認為英文語言包

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圖片轉(zhuǎn)文字</title>
		<script src="./js/tesseract.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="text">
			
		</div>
		<script type="text/javascript">
			const {
				createWorker
			} = Tesseract;
			const worker = createWorker({
				workerPath: './js/worker.min.js',   // 從上面獲取到的文件
				langPath: './lang-data',   // 語言包相對位置， 如果沒有默認為英文
				corePath: './js/tesseract-core.wasm.js',   // 從上面獲取到的文件
			});
			(async () => {
				await worker.load();  // 加載
				await worker.loadLanguage('eng');  // 加載英文的語言包
				await worker.initialize('eng');  // 加載英文的語言包
				const {
					data: {
						text
					}
				} = await worker.recognize('./img/4.png');  //需要解析的圖片
				console.log(text);
				document.getElementById('text').innerText = text;
				await worker.terminate();
			})();
		</script>
	</body>
</html>

ps：在tesseract解析圖片中的文字時，遇到不同國家的文字就可能解析出錯。

tesseract.js識別中文

更改語言包關(guān)于語言包的下載，可以從碼云上查找tessdata進行下載。
可提供參考地址：
https://tesseract-ocr.github.io/tessdoc/Data-Files
https://gitee.com/zealzheng/tessdata_fast?_from=gitee_search

這個tesseract.js的離線版本，只支持對英文的識別，不支持中文，如果你放一張中文的圖片，會發(fā)現(xiàn)識別的結(jié)果是一堆亂碼。
這里需要修改其中的代碼，同時要去官網(wǎng)上下載對應(yīng)的中文語言識別包。

1.下載中文識別包

tesseract.js的語言包下載地址為https://github.com/naptha/tessdata/tree/gh-pages/4.0.0
進入該網(wǎng)址，下載對應(yīng)的中文語言包，具體名稱為chi_sim.traineddata.gz

下載完成后，將該文件放到tesseract.js-offline-master\lang-data文件夾下，該文件夾存放了所有語言識別包文件。

2.修改相應(yīng)的代碼，實現(xiàn)識別中文

修改代碼，程序邏輯很簡單：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tesseract.js Offline</title>
  <script src="../node_modules/tesseract.js/dist/tesseract.min.js"></script>
  <script>
    const { createWorker } = Tesseract;
    const worker = createWorker({
      workerPath: '../node_modules/tesseract.js/dist/worker.min.js',
      langPath: '../lang-data',
      corePath: '../node_modules/tesseract.js-core/tesseract-core.wasm.js',
      logger: m => console.log(m),
    });

    (async () => {
      await worker.load();
      await worker.loadLanguage('chi_sim');
      await worker.initialize('chi_sim');
      const { data: { text } } = await worker.recognize('./img/4.png');
      //這里我使用了我自己的圖片目錄，
      //在實際使用時需要改成你自己的圖片路徑
      console.log(text);
      await worker.terminate();
    })();
  </script>
</head>
<body>
</body>
</html>

總結(jié)

Tesseract 支持的圖像格式是 jpg、png、bmp 和 pbm，它們只能作為元素（img、視頻或畫布）、文件對象 ( <input>)、blob 對象、圖像的路徑或 URL 和 base64 編碼圖像提供。語言以字符串形式提供，例如eng. 該+符號可用于連接多種語言，如eng+chi_tra. 語言參數(shù)用于確定要在圖像處理中使用的訓練語言數(shù)據(jù)。

到此這篇關(guān)于Tesseract.js使用純js實現(xiàn)的OCR文字識別的文章就介紹到這了,更多相關(guān)Tesseract.js實現(xiàn)OCR文字識別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！