本文旨在解决 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 强制将其视为一列，可以使用此模式。但这不适用于真正的多列情况。
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 功能。
