优化 Tesseract.js 处理多栏图像的文本识别_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

优化 Tesseract.js 处理多栏图像的文本识别

2025-11-21

浏览次数：次

返回列表

优化 tesseract.js 处理多栏图像的文本识别

本文旨在解决 Tesseract.js 在处理多栏图像时文本识别混淆的问题。核心在于调整 Tesseract 的页面分段模式（PSM）。通过将默认的 PSM_SINGLE_BLOCK 更改为更适合多栏布局的模式，如 PSM_AUTO_OSD，可以显著提高识别准确性，实现按列分离的文本输出。文章将详细介绍 PSM 的概念、不同模式的应用以及如何在 React.js 项目中集成这一优化。

Tesseract.js 多栏图像文本识别优化指南

在使用 Tesseract.js 进行光学字符识别（OCR）时，开发者经常会遇到一个挑战：当处理包含两列或三列文本的图像时，Tesseract 可能会将不同列的文本混淆在一起，导致识别结果难以阅读和使用。这通常不是 Tesseract 引擎本身的问题，而是其默认的页面分段模式（Page Segmentation Mode, PSM）不适用于此类复杂布局。

理解页面分段模式 (PSM)

Tesseract OCR 引擎在进行文本识别之前，会先对图像进行页面布局分析，将图像分割成不同的文本块、行和单词。这个过程由页面分段模式（PSM）控制。不同的 PSM 模式指示 Tesseract 应该如何理解和分析页面的整体结构。

PSM_SINGLE_BLOCK (默认模式): 这是 Tesseract.js 的默认 PSM 模式。它假设图像中的所有文本都构成一个单一的、统一的文本块。对于单列文档或简单的图像，这种模式通常工作良好。然而，对于多列布局，它会导致 Tesseract 尝试将所有文本作为一个整体来处理，从而混淆不同列的内容。
多栏布局的挑战: 在多栏文档中，文本是按垂直列排布的。如果 Tesseract 误认为这是一个单一的文本块，它会从左到右扫描整个宽度，将第一列的底部与第二列的顶部混淆，最终导致文本逻辑混乱。

针对多栏布局的 PSM 选择

为了解决多栏图像的文本混淆问题，我们需要选择一个更适合复杂布局的 PSM 模式。推荐尝试以下几种：

PSM_AUTO_OSD (自动页面方向和脚本检测，然后进行图像分割): 这是一个非常强大的模式，它会首先尝试检测图像的页面方向和脚本，然后根据检测到的布局自动进行页面分割。对于多栏文档，PSM_AUTO_OSD 通常能更好地识别出独立的列并按顺序处理它们。根据实际测试，此模式能够成功地先识别左列，再识别右列。
PSM_AUTO (自动页面分割，但无 OSD): 类似于 PSM_AUTO_OSD，但不会进行页面方向和脚本检测。如果确定图像方向和脚本是正确的，可以尝试此模式。
PSM_SINGLE_COLUMN (将图像视为一个单一的列): 如果图像确实是单列但可能包含其他非文本元素，或者希望 Tesseract 强制将其视为一列，可以使用此模式。但这不适用于真正的多列情况。
2088shop商城购物系统
2088shop商城购物系统是商城系统中功能最全的一个版本：非会员购物、商品无限级分类、不限商品数量、商品多级会员定价、上货库存、Word在线编辑器、订单详情销售报表、商品评论、留言簿、管理员多级别、VIP积分、会员注册积分奖励、智能新闻发布、滚动公告、投票调查、背景图片颜色更换、店标上传、版权联系方式修改、背景音乐（好歌不断）、广告图片支持Flash、弹出浮动广告、搜索引擎关健词优化、图文友情联
0 查看详情
PSM_SPARSE_TEXT (稀疏文本，允许任意顺序): 当图像中包含少量不规则分布的文本时，此模式可能有用。它不会尝试对文本进行严格的块或列分析。

在 Tesseract.js 中应用 PSM

在 Tesseract.js 中设置 PSM 非常简单，可以通过 Tesseract.recognize() 函数的第三个参数（配置对象）来传递。

示例代码：修改 handleSubmit 函数

以下是基于提供的 React.js 代码片段，展示如何修改 handleSubmit 函数以集成 PSM 配置：

import React, { useState, useEffect } from "react";
import Tesseract from "tesseract.js";
import ClipboardJS from "clipboard";
import Select from "react-select";

// ... (languageOptions 和其他组件代码保持不变)

const ImagesToText = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [images, setImages] = useState([]);
  const [texts, setTexts] = useState([]);
  const [progress, setProgress] = useState(0);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [errorMessage, setErrorMessage] = useState("");
  const [errorLanguagesMessage, setErrorLanguagesMessage] = useState("");
  const [selectedLanguages, setSelectedLanguages] = useState([]);

  // ... (handleImageUpload, handleCopyText, handleDownloadText, useEffect, handleReset 等函数保持不变)

  const handleSubmit = async () => {
    if (images.length === 0) {
      setErrorMessage("Select an image to convert.");
      return;
    }

    if (selectedLanguages.length === 0) {
      setErrorLanguagesMessage("Select any language.");
      return;
    }

    setIsLoading(true);
    setProgress(0);
    setTexts([]);
    setCurrentImageIndex(0);
    setErrorMessage("");
    setErrorLanguagesMessage("");

    const totalImages = images.length;
    let processedImages = 0;

    if (Array.isArray(images)) {
      for (const [index, image] of images?.entries()) {
        setCurrentImageIndex(index + 1);

        try {
          const result = await Tesseract.recognize(
            image,
            selectedLanguages.map((lang) => lang.value).join("+"),
            {
              // 在这里添加 PSM 配置
              // 推荐使用 psm: 3 (PSM_AUTO_OSD) 来处理多栏布局
              // 你也可以尝试其他值，例如 psm: 1 (PSM_AUTO)
              logger: (m) => {
                // 可选：添加 logger 追踪 Tesseract 进程
                if (m.status === "recognizing") {
                  // console.log(`Progress: ${m.progress}`);
                }
              },
              // 关键配置：设置页面分段模式
              // PSM_AUTO_OSD 对应的值是 3
              // PSM_AUTO 对应的值是 1
              // 更多 PSM 值可以参考 Tesseract 官方文档
              psm: 3 // 尝试 PSM_AUTO_OSD
            }
          );
          // 原有的文本处理逻辑
          const paragraphs = result.data.text.split("\n\n");
          const formattedParagraphs = paragraphs.map((paragraph) => {
            const sentences = paragraph.split(/[.|?]\s/);
            return sentences.join(" ");
          });
          setTexts((prevTexts) => [...prevTexts, ...formattedParagraphs]);
        } catch (err) {
          console.error(err);
          // Clear texts and stop conversion process immediately on error
          setTexts([]);
          setProgress(0);
          setIsLoading(false);
          return;
        } finally {
          processedImages++;
          const currentProgress = (processedImages / totalImages) * 100;
          setProgress(currentProgress);
        }
      }
    } else {
      console.error("Images is not an array.");
    }

    setIsLoading(false);
  };

  // ... (return 语句保持不变)
};

export default ImagesToText;

在上述代码中，关键的改动是在 Tesseract.recognize() 函数的第三个参数中添加了一个配置对象 { psm: 3 }。这里的 psm: 3 对应的是 PSM_AUTO_OSD 模式。

注意事项与最佳实践

实验与测试: 不同的文档类型和图像质量可能需要不同的 PSM 模式。强烈建议对您的具体用例进行实验，尝试 psm: 1 (PSM_AUTO)、psm: 3 (PSM_AUTO_OSD) 等值，以找到最适合的配置。
图像预处理: 尽管 PSM 可以解决布局问题，但良好的图像预处理仍然至关重要。这包括：
- 二值化: 将彩色或灰度图像转换为黑白图像，提高文本与背景的对比度。
- 去噪: 移除图像中的杂点和干扰。
- 去倾斜: 纠正图像的倾斜角度，使文本行保持水平。
- 缩放: 确保文本有足够的分辨率，通常建议文本高度至少为 20-30 像素。
语言包: 确保您加载了正确的语言包。Tesseract.js 需要对应的语言数据才能准确识别文本。
错误处理: 在实际应用中，完善的错误处理机制是必不可少的，以应对识别失败或图像损坏的情况。

总结

Tesseract.js 是一个强大的 OCR 工具，但在处理多栏图像时，其默认的页面分段模式可能会导致文本混淆。通过理解并正确配置 psm 参数，特别是使用 PSM_AUTO_OSD (对应 psm: 3)，可以显著提高多栏文档的识别准确性，确保文本按逻辑顺序输出。结合适当的图像预处理和持续的测试，您可以在 React.js 应用中实现高效且准确的 OCR 功能。

以上就是优化 Tesseract.js 处理多栏图像的文本识别的详细内容，更多请关注其它相关文章！

# 如何使用 # seo软件优化报价 # 来宾网站seo优化 # seo网站优化慢 # 安康农产品网站建设 # seo站外优化 # 淄博营销推广策划价格 # 广州seo # 青海网站推广销售 # 什么是seo优化关键词排名 # 本地同城推广营销服务 # 更适合 # react # 绑定 # 表单 # 第三个 # 标上 # 这是一个 # 它会 # 购物系统 # 文档 # ai # 工具 # js