本文旨在解决使用 tesseract.js 进行多列图像文本识别时，文本内容混淆的问题。通过调整 tesseract.js 的页面分段模式（psm），特别是采用 `psm_auto_osd` 模式，可以有效改善 ocr 结果的准确性和列分离效果。教程将详细介绍如何配置 psm 参数，并提供 react.js 示例代码，帮助开发者优化多列文档的文本提取流程。
在使用 Tesseract.js 进行光学字符识别（OCR）时，处理包含多列文本的图像是一个常见的挑战。默认情况下，Tesseract 引擎可能将整个图像视为一个单一的文本块，导致不同列的文本内容混淆，输出结果难以阅读和处理。解决这一问题的关键在于理解并正确配置 Tesseract 的页面分段模式（Page Segmentation Mode, 简称 PSM）。
理解页面分段模式 (PSM)
页面分段模式（PSM）是 Tesseract OCR 引擎的一个核心配置参数，它指导引擎如何分析图像的布局，将其分解为文本块、行和单词。选择合适的 PSM 对于获得高质量的 OCR 结果至关重要，尤其是在处理复杂布局的文档时。
Tesseract 提供了多种 PSM 模式，每种模式都适用于不同的文档结构：
- PSM_SINGLE_BLOCK (PSM=3): 这是 Tesseract.js 的默认模式。它假设图像包含一个统一的文本块。对于单列、排版简单的文档，此模式通常效果良好。然而，当图像包含多列文本时，它会将所有列的文本视为一个连续的块，导致文本混淆。
- PSM_AUTO_OSD (PSM=1): 此模式会自动检测页面的方向和脚本（OSD），然后尝试识别图像中的文本块。它通常能更好地处理多列和复杂布局，因为它会尝试将页面分解为逻辑上的文本区域，从而有助于区分不同的列。
- PSM_AUTO (PSM=0): 自动页面分割，但不进行 OSD。
- PSM_SINGLE_COLUMN (PSM=4): 假设图像是单列文本。
- PSM_SPARSE_TEXT (PSM=11): 寻找稀疏文本，适用于没有明确布局的文本区域。
对于多列图像，PSM_AUTO_OSD (PSM=1) 通常是最佳的起始点，因为它能够智能地识别并分离不同的文本区域。
在 Tesseract.js 中配置 PSM
在 Tesseract.js 中，可以通过 recognize 方法的第三个参数（一个 options 对象）来设置 PSM。关键的选项是 tessedit_pageseg_mode，其值对应于上述的 PSM 数字。
要解决多列文本混淆问题，我们需要将 tessedit_pageseg_mode 设置为 1 (即 PSM_AUTO_OSD)。
以下是修改后的 React.js 组件代码片段，展示了如何在 handleSubmit 函数中应用此配置：
import React, { useState, useEffect } from "react";
import Tesseract from "tesseract.js";
import ClipboardJS from "clipboard";
import Select from "react-select";
const languageOptions = [
// ... (语言选项保持不变)
{ value: "eng", label: "English" },
{ value: "chi_sim", label: "Chinese - Simplified" },
// ... 其他语言
];
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([]);
const handleImageUpload = (e) => {
const selectedImages = Array.from(e.target.files);
setImages(selectedImages);
setErrorMessage("");
};
const handleCopyText = () => {
const textWithSoftLineBreaks = texts.join("\n");
navigator.clipboard.writeText(textWithSoftLineBreaks);
};
const handleDownloadText = () => {
const element = document.createElement("a");
const textBlob = new Blob([texts.join("\n")], { type: "text/plain" });
element.href = URL.createObjectURL(textBlob);
element.download = "converted_text.txt";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
};
useEffect(() => {
const clipboard = new ClipboardJS(".copy-button");
clipboard.on("success", (e) => {
e.clearSelection();
});
return () => {
clipboard.destroy();
};
}, [texts]);
const handleReset = () => {
setIsLoading(false);
setImages([]);
setTexts([]);
setProgress(0);
setCurrentImageIndex(0);
setErrorMessage("");
setErrorLanguagesMessage("");
window.location.reload();
};
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 {
// 核心修改：在 recognize 方法中添加 options 对象，设置 tessedit_pageseg_mode
const result = await Tesseract.recognize(
image,
selectedLanguages.map((lang) => lang.value).join("+"),
{
// 启用自动页面方向和脚本检测，并尝试识别文本块
// PSM_AUTO_OSD 对应的数值是 1
tessedit_pageseg_mode: 1
}
);
// Tesseract 识别结果中的文本通常会根据其内部逻辑进行分段。
// 对于多列文档，PSM_AUTO_OSD 模式会尝试先识别列，然后按列顺序输出文本。
// 这里的文本后处理逻辑可以根据实际需求调整，例如：
// 如果 PSM_AUTO_OSD 成功将列分开，result.data.text 可能会按列顺序排列。
// 原始代码中的分段逻辑：
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);
// 发生错误时，清除文本并立即停止转换过程
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 (
<div className="container" style={{ height: "97vh" }}>
<div className="row h-100 mt-3">
<div className="col-md-3 left-bar sticky-top border 1 ms-2">
<h1 className="center py-3 mc-5 underline">Images to text (ocr)</h1>
<input
type="file"
onChange={handleImageUpload}
className="form-control mt-5 mb-2"
multiple
accept="image/*"
/>
{errorMessage && <p className="text-danger">{errorMessage}</p>}
<Select
isMulti
options={languageOptions}
value={selectedLanguages}
onChange={setSelectedLanguages}
placeholder="Select languages..."
/>
{errorLanguagesMessage && (
<p className="text-danger">{errorLanguagesMessage}</p>
)}
<input
type="button"
onClick={handleSubmit}
className="btn btn-outline-success mt-3"
value="Start Convert"
/>
{texts.length > 0 && (
<button
className="btn btn-primary mt-3 ms-1"
onClick={handleDownloadText}
>
Download Text
</button>
)}
<div className="mt-1">
<button className=" btn ml-2 btn-danger" onClick={handleReset}>
Reset
</button>
<button
className="mt-3 btn btn-secondary d-inline ms-1 "
onClick={handleCopyText}
>
Copy Text
</button>
</div>
</div>
<div className="col-md-8 right-bar border 1 ms-2">
<h4 className="mt-5 text-center">Select an Image to convert (ocr)</h4>
{isLoading && (
<div className="text-center">
<div className="text-center">
<progress
className="custom-progress-bar"
value={progress}
max="100"
></progress>
<p className="text-center py-0 my-0">
Converting...: {progress.toFixed(0)}% ({currentImageIndex} of{" "}
{images.length})
</p>
</div>
</div>
)}
{!isLoading && texts.length > 0 && (
<div>
<div className="form-control box-p w-100 mt-5 m-none">
{texts.map((paragraph, index) => (
<p key={index}>{paragraph}</p>
))}
</div>
</div>
)}
</div>
</div>
</div>
);
};
export default ImagesToText;注意事项与最佳实践
- 图像质量是基础： 无论选择何种 PSM，OCR 效果都与输入图像的质量密切相关。高分辨率、清晰、对比度适中、无倾斜、无噪声的图像将显著提高识别准确率。
-
图像预处理： 对于扫描件或质量不佳的图像，在进行 OCR 之前进行预处理非常重要。常见的预处理技术包括：
- 灰度化与二值化： 将彩色图像转换为灰度图，再转换为黑白二值图，有助于突出文本。
- 去噪： 移除图像中的杂点和干扰。
- 倾斜校正（Deskewing）： 自动检测并校正图像的倾斜角度，使文本行水平对齐。
- 裁剪（Cropping）： 如果图像中包含大量非文本区域，可以预先裁剪掉，只保留需要识别的部分。
- 选择正确的语言包： 确保 selectedLanguages 数组中包含文档内容的正确语言。对于多语言文档，可以组合使用语言包，例如 eng+chi_sim。
- 实验不同的 PSM 模式： 尽管 PSM_AUTO_OSD (PSM=1) 对于多列文档通常效果最好，但并非万能。对于某些特殊或极具挑战性的布局，可能需要尝试其他 PSM 模式，如 PSM_AUTO (PSM=0) 或 PSM_SINGLE_COLUMN (PSM=4)，以找到最适合特定文档的模式。
- 后处理： 即使 OCR 结果有所改善，也可能需要对提取的文本进行进一步的清洗和格式化。例如，去除多余的空格、合并因识别错误而断裂的单词、或根据文档结构重新组织文本。
总结
通过在 Tesseract.js 中正确配置页面分段模式，特别是使用 PSM_AUTO_OSD (PSM=1)，可以有效解决多列图像文本识别中的混淆问题，显著提高 OCR 结果的准确性和可读性。结合高质量的图像输入、适当的预处理和灵活的 PSM 模式选择，开发者可以构建出更加健壮和高效的 OCR 解决方案。在实际应用中，建议对不同 PSM 模式进行测试，以确定最符合特定文档类型和质量的配置。
