Tesseract.js 实现 OCR 文字识别

Tesseract.js 在识别图片中的文字时，可以获取每个文字（或单词）的精确位置信息，主要通过以下两种方式实现：

1. HOCR 输出（HTML 格式）

Tesseract.js 支持生成 HOCR（HTML-based OCR） 格式的输出，其中包含每个识别元素的边界框坐标。

• 关键字段：每个单词的 HTML 标签会包含 bbox 属性，格式为 bbox x1 y1 x2 y2，表示单词在图片中的左上角坐标 (x1, y1) 和右下角坐标 (x2, y2)。
• 示例：

  <span class="ocrx_word" id="word_1" title="bbox 100 200 300 250">Hello</span>
  

  这表示单词 “Hello” 的边界框从坐标 (100, 200) 到 (300, 250)。

2. 通过 ResultIterator 遍历结果

在 JavaScript 中，可以使用 ResultIterator 逐字遍历识别结果，并获取每个单词的坐标和置信度。

• 代码示例：

  import { createWorker } from 'tesseract.js';
  
  (async () => {
    const worker = await createWorker('eng'); // 加载英文模型
    await worker.loadLanguage('eng');
    await worker.initialize('eng');
  
    const result = await worker.recognize('image.png');
    const iterator = result.getIterator();
  
    iterator.forEachWord((word) => {
      const text = word.getText();
      const confidence = word.getConfidence();
      const bbox = word.getBoundingBox(); // 获取边界框 {x0, y0, x1, y1}
      console.log(`文字: ${text}, 置信度: ${confidence}, 位置: ${bbox}`);
    });
  
    await worker.terminate();
  })();
  

3. 关键参数配置

• 设置识别模式：
  使用 setPageSegMode(tesseract.PSM_SINGLE_WORD) 将每个单词作为独立块处理，提高坐标精度。
• 启用 HOCR 输出：
  通过 setTessVariable("tessedit_create_hocr", "1") 生成 HOCR 格式结果。

4. 应用场景

• 票据识别：自动提取发票、收据中的文字及其位置。
• 内容分析：定位社交媒体图片中的关键文字（如广告文案）。
• 文档数字化：重建扫描文档的版式，保留文字位置信息。

5. 注意事项

• 坐标原点：Tesseract 的坐标原点默认在图片左上角，y 轴向下延伸。
• 图像预处理：对低质量图片（如模糊、倾斜）进行灰度化、二值化等预处理，可提升坐标精度。

如果需要进一步处理坐标数据（如可视化或映射到原始图像），可以结合 Canvas 或 OpenCV 等工具实现。