分享每一天-使用Tesseract.js 识别图片中的文字

使用Tesseract.js 识别图片中的文字

工具推荐 3468 0 创建时间：2022-10-25 09:59:17

使用Tesseract.js 识别图片中的文字 Tesseract.js Javascript

#### Tesseract简介
Tesseract是惠普布里斯托实验室在1985到1995年间开发的一一个开源的OCR引擎，曾经在1995 UNLV精确度测试中名列前茅。但1996年后基本停止了开发。2005年，惠普将其对外开源，2006 由Google对Tesseract进行改进、消除Bug、优化工作。

官网项目地址：
github.com/tesseract-ocr/tesseract

Tesseract.js是基于Tesseract——OCR引擎的一个纯JavaScript接口。

图片测试地址：
tesseract.projectnaptha.com
官网地址：github.com/naptha/tesseract.js#tesseractjs

#### 1.安装node.js

官网给出的示例基本都使用了node.js，安装这个主要是为了下一步利用npm工具下载安装Tesseract.js的相应文件，以实现离线的文字识别。

#### 2.从官网下载Tesseract.js的离线版本
在官网中可以找到链接，这里也给出：

github.com/jeromewu/tesseract.js-offline

直接将其下载下来，当然你也可以选择使用git工具clone到本地.

下载下来之后，将其解压。

#### 3.命令行进入上一步解压的文件夹，使用npm install命令下载安装相关包。

在它下载安装完成后，你会发现在该目录文件夹下多了一个名为node_modules的文件夹，这个文件夹下的东西就是刚刚安装下载的东西，其中包含了所有文字识别需要的组件及库。

#### 4.运行程序
这一步可以先试一试参照官方文档的示例，在上一步的命令行中输入

npm run start

这时服务器已经启动，在浏览器中输入

http://localhost:3000/browser/ 
访问，再按F12，查看浏览器控制信息，会发现程序正常运行，识别了该程序内置的图片，识别的结果在控制台中已经输出了.

#### 5.让其在本地idea的浏览器环境中直接运行

将该文件夹复制到你的idea项目中，然后找到F:\Projects\IdeaProjects\springboot01helloworld\src\main\resources\static\html\OCR\tesseract.js-offline-master\browser\index.html，即该目录下的browser文件夹下的index.html文件(前面的路径应该是你的具体本地),再选择使用浏览器打开，即可得到和第四步一样的结果。

#### 6.在浏览器识别中文
这个tesseract.js的离线版本，只支持对英文的识别，不支持中文，如果你放一张中文的图片，会发现识别的结果是一堆乱码。
这里需要修改其中的代码，同时要去官网上下载对应的中文语言识别包。
 
1.下载中文识别包

tesseract.js的语言包下载地址为

github.com/naptha/tessdata/tree/gh-pages/4.0.0
进入该网址，下载对应的中文语言包，具体名称为chi_sim.traineddata.gz

下载完成后，将该文件放到tesseract.js-offline-master\lang-data文件夹下，该文件夹存放了所有语言识别包文件.

2.修改相应的代码，实现识别中文
修改第五步中的index.html中的代码即可，程序逻辑很简单：
```javascript
<!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('../images/合同测试图片.png');
      //这里我使用了我自己的图片目录，
      //在实际使用时需要改成你自己的图片路径
      console.log(text);
      await worker.terminate();
    })();
  </script>
</head>
<body>
</body>
</html>

```
修改后，再在idea中使用浏览器打开，会发现已经能够正常识别中文了.

使用Tesseract.js 识别图片中的文字

商品推荐

广告推荐

推荐文章