在React前端页面中实现图片文字识别，不一定非要把图片传到服务器。Tesseract.js 是 Tesseract OCR 引擎的 JavaScript 移植版本，它通过 WebAssembly 把识别能力搬到浏览器。这样一来，用户可以离线使用，图片不会离开本地，隐私更有保障。本文会从 Tesseract.js 的底层工作方式讲起，再演示如何把它接入 React 组件，随后讨论中文识别和参数调优，最后列出性能优化与常见故障的排查方法。
一、Tesseract.js 的核心原理与 API 结构
Tesseract.js 并不是简单地把图片发送到某个远程 OCR 接口，它把经典的 Tesseract OCR 引擎编译成 WebAssembly 模块，在浏览器的 JavaScript 环境中直接运行。这样做的好处是图片数据不需要经过网络传输，识别过程完全本地化。Tesseract.js 在内部使用 Web Worker 来运行耗时的识别任务，避免阻塞主线程，所以页面在识别大图时仍然可以响应用户操作。
对外暴露的核心方法是 createWorker。调用 createWorker 可以指定语言包，例如英文使用 eng，中文使用 chi_sim。创建 worker 之后，通过 recognize 方法传入图片地址、本地文件或图像元素，返回一个包含文本结果的对象。常用的调用形式如下：
import { createWorker } from 'tesseract.js';
const worker = await createWorker('eng');
const { data: { text } } = await worker.recognize(imageFile);
console.log(text);
await worker.terminate();
recognize 方法返回的数据结构里包含 text 字段，也就是识别出的纯文本。除此之外还有 words、lines、paragraphs 等层级信息，可以用于后续定位文字坐标。需要注意的是，worker 在不再使用时要调用 terminate 释放资源，否则会一直占用内存。
二、在 React 中完成图片上传与识别
把 Tesseract.js 接入 React 组件时，首先要安装依赖。在项目根目录执行 npm install tesseract.js 或 yarn add tesseract.js。由于 createWorker 是异步方法，通常会在 useEffect 中初始化 worker，同时把 worker 实例保存在 useRef 里，避免组件重新渲染时重复创建。
下面是一个完整的 OCR 组件示例。它包含文件选择、识别按钮、识别状态和结果展示四个部分。用户选择图片后，先通过 URL.createObjectURL 生成预览地址，再点击按钮触发识别流程。
import { useRef, useState } from 'react';
import { createWorker } from 'tesseract.js';
export default function OcrReader() {
const workerRef = useRef(null);
const [imageUrl, setImageUrl] = useState('');
const [result, setResult] = useState('');
const [loading, setLoading] = useState(false);
const handleFile = (e) => {
const file = e.target.files[0];
if (file) {
setImageUrl(URL.createObjectURL(file));
setResult('');
}
};
const handleOcr = async () => {
if (!imageUrl) return;
setLoading(true);
try {
if (!workerRef.current) {
workerRef.current = await createWorker('chi_sim');
}
const { data } = await workerRef.current.recognize(imageUrl);
setResult(data.text);
} catch (err) {
setResult('识别失败：' + err.message);
} finally {
setLoading(false);
}
};
return (
<div>
<input type="file" accept="image/*" onChange={handleFile} />
<button onClick={handleOcr} disabled={loading || !imageUrl}>识别文字</button>
<img src={imageUrl} alt="待识别图片" width="300" />
<textarea value={result} readOnly rows="6" cols="40" />
</div>
);
}
这里把 worker 缓存到 useRef 中，只在第一次识别时创建，后续复用同一个实例。这样做能减少语言包加载和 WebAssembly 编译的等待时间。需要注意的是，如果用户切换了图片而且希望立即识别，可以保留 worker，直接调用 recognize。组件卸载时最好在 useEffect 的清理函数里调用 terminate 释放资源。
识别文本可能包含空格、换行和页码等噪声，如果业务需要，可以进一步用正则表达式清洗结果。例如把多个连续空格替换成一个，或者按行拆分后过滤掉长度过短的行。
三、中文识别与参数调优
默认情况下，Tesseract.js 使用 eng 英文语言包。如果需要识别中文，必须在 createWorker 中指定 chi_sim，同时确保网络能下载对应的训练数据文件。首次创建 worker 时会从 CDN 获取语言包，如果网络不稳定，可以把语言包文件下载到本地，通过 worker 的 langPath 和 gzip 参数指定路径。
中文识别的准确率受图片清晰度、字体大小、背景复杂程度影响很大。可以在创建 worker 后设置识别参数，例如页面分割模式 PSM。常用的 PSM 值包括 3 表示全自动页面分割，6 表示把图像当作单一文本块，7 表示把图像当作单行文本。针对截图或者卡片识别场景，使用 6 或 7 往往比默认模式更准确。设置方式如下：
const worker = await createWorker('chi_sim');
await worker.setParameters({
tessedit_pageseg_mode: '6',
});
const { data } = await worker.recognize(imageUrl);
console.log(data.text);
await worker.terminate();
除了 PSM，还可以设置字符白名单 tessedit_char_whitelist，只保留数字、字母或常用汉字，减少误识别。例如只识别身份证号码时，设置白名单为 0123456789X 可以大幅提高数字识别准确率。如果图片方向不确定，可以设置 tessedit_enable_doc_dict 等参数，但具体效果需要根据实际样本测试。
另一个容易被忽略的点是图片预处理。Tesseract 对高对比度、大字号、无倾斜的图像识别效果最好。可以在 Canvas 中先把图片转成灰度，再做二值化处理，或者直接放大原图，再交给 Tesseract.js 识别。这些预处理虽然不能保证 100% 准确，但通常能明显改善小字和低质量图片的识别结果。
四、性能优化与常见问题
在大图或多次识别场景下，Tesseract.js 的耗时和内存占用都需要控制。首先，尽量复用 worker，不要每次识别都重新创建。其次，识别前压缩图片尺寸，例如限制最大边不超过 1500 像素，否则 WebAssembly 内部的图像处理会非常慢。压缩可以通过 Canvas 的 drawImage 实现，把原始文件转换为缩放后的数据 URL 或 Blob 再传给 recognize。
如果页面需要同时处理多张图片，不建议并行创建多个 worker，因为每个 worker 都会占用一块相对独立的内存。可以使用一个队列，顺序识别或者限制最大并发数。识别过程中可以通过进度回调了解当前状态，Tesseract.js 的 createWorker 和 recognize 都支持 logger 参数，传入一个函数即可接收 status 和 progress 数据，适合展示进度条。
常见问题还包括：语言包下载失败、识别结果为空、图片跨域等。语言包下载失败通常与网络环境有关，可以改用本地静态资源；识别结果为空多数是图片质量太差或 PSM 选错；图片跨域则需要在图片服务器设置 CORS 响应头，或者先用 fetch 把图片转为 Blob 再识别。此外，浏览器内存占用在识别大图时可能上升，及时调用 worker.terminate 和释放 createObjectURL 创建的对象链接，可以避免内存泄漏。
