2分钟零配置上手Tesseract.js：纯前端图片文字识别完整指南

【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 📖🎉🖥项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js

产品经理甩来一张截图，要求明天上线"图片转文字"功能；运营同事抱着一沓票据，等着你批量提取金额；你上网一查，主流方案不是要注册云服务账号、按次充值，就是得在服务器上装 Python 环境、编译 C++ 依赖……是不是已经开始头疼了？

别慌。本文要讲的 Tesseract.js，是一个用纯 JavaScript 实现的 OCR（光学字符识别，即图片文字识别）开源库，支持 100 多种语言，浏览器里引一条<script>标签就能跑，全程零安装、零后端、零费用。读完本文你将掌握：

• 一条 CDN 链接 + 3 行代码，完成第一张图片的文字提取
• 中英文混合识别、指定区域裁剪等高频配置技巧
• 批量图片并行提速方案，以及 3 个高频报错的排查方法

一、技术选型对比：为什么是 Tesseract.js 而不是云服务？

在动手之前，先回答一个关键问题：市面上 OCR 方案那么多，凭什么选它？我们用一张表看清差异：

Tesseract.js 的本质，是把经典的 Tesseract OCR 引擎通过 WebAssembly 编译进浏览器和 Node.js（项目范围说明见 README），识别内核与官方引擎一致，但省掉了全部部署环节。对前端工具类网站、H5 应用、企业内部系统来说，它是性价比最高的选择。

二、最小可用示例：3 步跑通第一张图片识别

光说不练假把式，先来一个能立刻复制运行的完整示例，感受一下什么叫"零配置"。

<!-- 第 1 步：通过 CDN 引入 Tesseract.js（固定版本号，避免自动升级引发兼容性问题） --> <script src='https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js'></script> <!-- 第 2 步：一个文件选择框，让用户挑选要识别的图片 --> <input type="file" id="picker" accept="image/*"> <script type="module"> // 第 3 步：只创建一次 Worker，之后反复使用 // Worker 是 Tesseract.js 的核心对象，负责加载引擎、语言包并执行识别任务 const worker = await Tesseract.createWorker('eng', 1, { logger: m => console.log(`${m.status}: ${(m.progress * 100).toFixed(1)}%`), }); // 用户选好图片后交给 Worker 识别，再把结果弹窗展示 document.getElementById('picker').addEventListener('change', async (e) => { const file = e.target.files[0]; if (!file) return; const { data: { text } } = await worker.recognize(file); alert(`识别结果：\n${text}`); }); </script>

这段代码实现了：页面打开即预载 OCR 引擎，用户上传任意图片后立刻得到其中的文字，全程不离开浏览器、不经过任何服务器。控制台还能看到"加载语言包 → 识别中"的实时进度。

提示：官方提供了更精细的示例，见examples/browser/basic-efficient.html，其核心思想就是"Worker 建一次、识别多次"。

三、核心能力拆解：3 个高频 API 一次讲透

3.1 多语言混合识别：一行代码切换"中英双语" 🌏

是什么：createWorker的第一个参数是语言代码，多个语言用+连接即可。简体中文是chi_sim，英文是eng，支持 100+ 种语言（完整列表见docs/tesseract_lang_list.md）。

怎么用：在创建 Worker 时把语言参数拼好，之后无需任何额外操作。

代码演示：

// 'chi_sim+eng' 即"简体中文+英文"混合识别 // 也支持数组写法：createWorker(['eng', 'chi_tra']) const worker = await Tesseract.createWorker('chi_sim+eng', 1, { logger: m => console.log(m), // 打印加载语言包、识别等各阶段进度 }); const { data: { text } } = await worker.recognize('mixed.png'); console.log('混合语言识别结果：', text);

这段代码实现了：一张同时包含中英文的图片，识别结果中两种语言都能被正确提取。

3.2 识别区域裁剪：只认图片里的"关键位置" ✂️

是什么：worker.recognize的第二个参数支持rectangle选项，用于把识别范围限定在图片的某个矩形区域内。

怎么用：传left / top / width / height四个像素值。适用于票据金额、截图水印、验证码等"文字只在一小块区域"的场景——既能提高准确率，也能省掉无关文字的干扰。

代码演示：

// 只识别图片左上角 600x120 的区域（例如票据的金额栏） const { data: { text } } = await worker.recognize('bill.png', { rectangle: { left: 0, top: 0, width: 600, height: 120 }, }); console.log('区域文字：', text);

这段代码实现了：对整张图片不做全文识别，只输出指定矩形内的文字，速度和准确率双提升。

3.3 识别提速三连：白名单 + 版面模式 + 并行调度 ⚡

是什么：Tesseract 底层提供大量可调参数（完整说明见docs/api.md），其中三个最常用：字符白名单tessedit_char_whitelist、版面分割模式tessedit_pageseg_mode、以及用于多 Worker 并行的 Scheduler。

怎么用：白名单和版面模式通过worker.setParameters设置；并行调度则使用createScheduler把多个 Worker 组成一个任务池。

代码演示：

// 场景：识别一串纯数字（验证码、订单号等） await worker.setParameters({ tessedit_pageseg_mode: Tesseract.PSM.SINGLE_LINE, // 版面模式改为"单行"，跳过整页排版分析 tessedit_char_whitelist: '0123456789', // 白名单：只允许输出数字，杜绝字母误判 }); // 场景：批量识别 10 张图，用 2 个 Worker 并行 const scheduler = Tesseract.createScheduler(); for (let i = 0; i < 2; i++) { const w = await Tesseract.createWorker('eng'); scheduler.addWorker(w); // 加入调度器统一管理 } const results = await Promise.all(images.map(img => scheduler.addJob('recognize', img) // 任务自动分配给空闲的 Worker )); await scheduler.terminate(); // 一次性回收所有 Worker

这段代码实现了：单张图片识别更快、更精准；多张图片并行处理，吞吐量成倍提升。调度器与 Worker 的取舍细节可参考docs/workers_vs_schedulers.md。

四、避坑指南：3 个高频报错与解决方案

新手最容易踩的坑，基本都集中在这三处：

另外要特别提醒：如果自定义corePath，必须指向包含 4 个核心文件的目录，而不是单个.js文件，否则会显著影响性能与兼容性（详见docs/performance.md）。离线部署的完整方案见docs/local-installation.md，常见问题汇总见docs/faq.md。

五、综合实战：票据金额批量识别小工具

把上面的知识点串起来，做一个贴近真实业务的案例：批量识别 3 张票据的金额。测试图可以直接使用项目里的tests/assets/images/bill.png。

// 需求：批量提取票据金额，只保留数字，2 个 Worker 并行处理 // 1. 创建调度器，统一管理 Worker 池 const scheduler = Tesseract.createScheduler(); // 2. 创建 2 个"中英双语"Worker，并各自限定数字白名单 for (let i = 0; i < 2; i++) { const worker = await Tesseract.createWorker('chi_sim+eng', 1, { logger: m => console.log(`Worker${i}：${m.status}`), }); await worker.setParameters({ tessedit_char_whitelist: '0123456789.', // 金额场景：只关心数字和小数点 }); scheduler.addWorker(worker); } // 3. 3 张票据同时丢进任务队列，Promise.all 等待全部完成 const files = ['bill.png', 'invoice1.jpg', 'invoice2.png']; const results = await Promise.all(files.map(f => scheduler.addJob('recognize', f).then(r => r.data.text) )); // 4. 逐张输出金额（把非数字字符去掉，仅保留数字串） results.forEach((text, i) => { console.log(`第${i + 1}张票据金额：${text.replace(/[^\d.]/g, '')}`); }); // 5. 全部完成，一次性回收所有 Worker 释放内存 await scheduler.terminate();

这段代码实现了：两张以上 Worker 并行识别多张票据，自动过滤出金额数字，完成后统一释放资源。整个流程无需任何后端参与，是一个完整可落地的"前端 OCR 小工具"原型。

六、总结：最佳实践清单与下一步

回顾全文，把最关键的几条经验沉淀成清单，方便你直接照做：

1. 固定版本：生产环境使用固定版本号的 CDN 链接，避免自动升级引发兼容性问题。
2. 复用 Worker：Worker 建一次、识别多次，别为每张图都新建实例；批量场景用 Scheduler，Worker 数量不超过 CPU 核心数。
3. 善用白名单与区域裁剪：明确知道文字内容范围时，tessedit_char_whitelist和rectangle能同时提升速度与准确率。
4. 隐私优先：敏感图片（如证件、票据）全程在前端处理，不上传任何服务器。
5. 预留兜底：语言包默认走公共 CDN，重要应用务必配置langPath本地备份。

还想深入的话，官方文档都为你备好了：完整 API 参考见docs/api.md，性能调优见docs/performance.md，示例代码见examples/browser/与examples/node/目录。

现在就动手吧！复制文中的最小示例，换一张你自己的图片试试，2 分钟之内，你就能在浏览器里看到图片文字被一行行提取出来——这种"零配置即用"的爽快感，值得你立刻体验。🚀

【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 📖🎉🖥项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js