【前端】如何依靠纯前端实现拍照获取/选择文件等文字识别OCR技术

本文仅介绍第三方依赖包Tesseract.js，Tesseract.js 是一个基于网页的 OCR（光学字符识别）引擎，可以识别图像中的文本并将其转换为可供计算机处理的文本数据。

支持多框架编译，如Vue、React等，这里展示步骤为React开发。

下面直接进入主题：附Tesseract.js官方（https://github.com/naptha/tesseract.js）

1. 下载安装依赖包

npm install tesseract.js
# 或者
yarn add tesseract.js

2. 在对应的页面或者App.js中引入，如OCRTest.js页面

import Tesseract from 'tesseract.js';

3. 初始化一个Input，用于选择图片使用，并且加入一个日志输出框，以及对应的预览图，识别文本，识别耗时，转换后的文本展示等HTML内容。界面Demo如下：

4. 在对应的Input触发选中方法中，handleFileChange初始化预览图，在点击button开始识别，更改状态并执行tesseract初始化，识别文字，根据正则匹配截取自己需要的文本，并且开始计时。

3-4步骤完整代码Demo如下：注意这里用了Hook写法，因为需求是获取一串数字，所以英文包可能存在把数字8识别成英文B，要做兼容。

其中LSTM 引擎和假设单行文本以及白名单之类的可配置也可不配，没有配置会自动选择引擎。具体要根据识别结果去慢慢调整。

而英文包或中文包也是可选项，一般针对性强一点只获取英文数字则选择英文包，因为中文识别机制总会会相对难一点，准确率更低些。

import React, { useState, useEffect } from 'react';
import Tesseract from 'tesseract.js';
import { Header } from 'components'

function OcrComponent() {
  const prefixes = '783|784|731'; // 暂定的数字开头前缀，用于匹配识别文本
  const [file, setFile] = useState(null);
  const [inputText, setInputText] = useState('');
  const [inputOCRText, setInputOCRText] = useState('');
  const [inputLoading, setInputLoading] = useState(false);
  const [inputTime, setInputTime] = useState(null);
  const [previewInputUrl, setPreviewInputUrl] = useState(null);
  const [logMessages, setLogMessages] = useState([]);

  // 兼容措施，如果有7开头并且后面连着12个字符的，可能会把数字“8”被识别为英文“B”，
  const replaceBWith8 = (text) => {
    // 定义正则
    const pattern = /7(?=(?:\d|B){11}\d)([\dB]{11})/g;

    return text.replace(pattern, (match, p1) => {
      // 替换'B'为'8'
      return '7' + p1.replace(/B/g, '8');
    });
  }

  // OCR处理函数
  const handleOcr = async (source, setTextFn, setLoadingFn, setOcrTextFn, logger) => {
    setLoadingFn(true);
    setTextFn('');

    try {
      // 创建一个新的Promise来处理Tesseract识别过程。
      const result = await Tesseract.recognize(
        source,
        // 'chi_sim', // 中文简体
        'eng', // 可以根据需要指定语言包
        // 'chi_sim+eng', // 使用中文和英文语言包
        {
          logger: m => {
            // 更新日志消息，限制日志条目数量以避免内存泄漏
            setLogMessages(prevMessages => [m, ...prevMessages.slice(0, 9)]);
          },
          tessedit_ocr_engine_mode: 1, // 使用 LSTM 引擎 (OEM_LSTM_ONLY)
          tessedit_pageseg_mode: 6,   // 假设单行文本 (PSM_SINGLE_LINE)
          // tessedit_char_whitelist: '1234567890', // 识别的字符白名单
          // tessedit_zero_rejection: true // 允许零置信度的识别结果
        }
      );

      console.log('识别出来的文本：', result.data.text);
      setLogMessages((prevMessages) => [`识别结束出来的文本：${result.data.text}`, ...prevMessages]);
      // 替换'B'为'8'
      let resultText = replaceBWith8(result.data.text);
      console.log('转换后的文本：', resultText);

      setOcrTextFn(resultText);

      // 使用正则查找数字
      const regex = new RegExp(`(?:\D|^)(${prefixes})\d{10}`, 'g');

      // 创建一个空数组用于存储匹配结果
      let matches = [];
      let match;

      while ((match = regex.exec(resultText)) !== null) {
        // 确保我只