不写一行后端代码网页里 3 分钟跑通 OCR 文字识别Tesseract.js 实战【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js你点开这篇文章多半是遇到了和我一样的处境产品丢来一个需求——用户上传的小票、账单、扫描件要在网页里直接把文字提取出来。听起来不难真做起来才发现传统 OCR 方案要搭后端、装引擎、配环境光踩坑就能耗掉一下午。而Tesseract.js让这件事变成了纯前端的活儿它是 100% JavaScript 编写的 OCR 文字识别库支持 100 种语言无需服务器识别计算全部发生在浏览器里。读完本文你将掌握用 CDN 快速引入写出第一段可运行的图片文字提取代码多语言、识别区域、识别模式等关键参数的调优姿势用 Scheduler 并行处理批量图片而不卡页面跨域图片、语言包加载失败等高频坑的填坑方法一、一个真实需求让网页自己看懂图片里的字先说场景。我接到的活儿是这样的财务部门每月要人工录入几十张银行对账单字段又多又碎眼都快看花了。需求就一句话——做个页面传图上去文字自动出来能复制就行。如果用传统方案你会撞上三堵墙后端部署墙OCR 引擎大多是 C 写的二进制要装系统依赖、处理编译环境服务器上折腾半天是常事。资源开销墙识别是 CPU 密集型任务图片一多服务器 CPU 直接吃满接口排队排到天荒地老。对接成本墙前后端接口、任务队列、超时重试……为了一个上传功能得写一整套后端链路。Tesseract.js 直接把这三堵墙拆了。它把经典的 Tesseract OCR 引擎编译成 WebAssembly封装成纯 JavaScript 库运行在浏览器的 Web Worker 里——你的服务器全程躺平识别计算发生在用户自己的设备上。官方支持 100 种语言覆盖中英日韩、德法西葡等主流语种浏览器和 Node.js 都能用。上图是官方演示效果点击即可识别内置样图或者直接把图片拖进页面识别过程完全在浏览器内完成无需任何后端参与。二、任务一两条 script 标签让第一段识别代码跑起来先别管什么架构第一个任务很简单写一段复制即用的代码把一张图片里的英文识别出来。用国内可访问的 jsDelivr CDN 引入 v5 稳定版然后写一个最简页面input typefile iduploader acceptimage/* pre idresult识别结果会显示在这里/pre script srchttps://cdn.jsdelivr.net/npm/tesseract.js5/dist/tesseract.min.js/script script // 全局只创建一次 Worker反复使用 const worker await Tesseract.createWorker(eng); document.getElementById(uploader).addEventListener(change, async (e) { const file e.target.files[0]; if (!file) return; // 核心就这一行识别 const { data: { text } } await worker.recognize(file); document.getElementById(result).textContent text; }); /script代码拆开看其实只有三步Tesseract.createWorker(eng)创建识别 Workereng是语言代码表示英文worker.recognize(file)把File对象直接丢进去返回的data.text就是识别出的全文剩下的就是把结果渲染到页面上。代码优化提示Worker 初始化下载核心 加载语言包是最耗时的一步所以一定要在页面加载时就创建一次、全局复用而不是每次识别都createWorker。生产环境的完整写法可以参考 examples/browser/basic-efficient.html。三、任务二把准确率从能用调到好用英文能出来了客户的要求立刻跟进中文呢图片里有表格、有数字怎么办这一节专门解决识别得准。多语言混合识别中文图片用chi_sim简体中文中英文混排用拼接语言代码// 中英文混合识别 const worker await Tesseract.createWorker(chi_simeng);语言代码的完整清单见 docs/tesseract_lang_list.md想识别哪种语言把对应代码塞进字符串就行。只识别图片的某个区域对账单这类图片通常只有表格区域有字其他地方全是噪音。用rectangle参数把识别范围框住准确率立竿见影// 只识别从 (0,0) 开始、宽 300 高 200 的区域 const { data: { text } } await worker.recognize(file, { rectangle: { left: 0, top: 0, width: 300, height: 200 } });限定识别模式与字符集如果业务场景很固定——比如只认金额数字——直接告诉引擎只看单行、只认数字速度能快一截await worker.setParameters({ tessedit_pageseg_mode: Tesseract.PSM.SINGLE_LINE, // 单行文本模式 tessedit_char_whitelist: 0123456789 // 只识别数字 });参数说明PSM页面分割模式和各类tessedit_参数都直接继承自 Tesseract OCR 引擎完整的枚举与含义可以在 src/constants/ 的PSM.js、OEM.js中查看。四、任务三几十张图片一起扔进来页面别卡单人值守搞定了财务小姐姐甩来一句话能不能一次传 20 张这就是批量识别的场景。单 Worker 逐个识别太慢正确姿势是用Scheduler调度器管理多个 Worker 并行干活const scheduler Tesseract.createScheduler(); // 根据 CPU 核心数开 4 个 Worker for (let i 0; i 4; i) { const worker await Tesseract.createWorker(eng); scheduler.addWorker(worker); } // 所有图片一起提交并行识别 const results await Promise.all( imageFiles.map(file scheduler.addJob(recognize, file)) ); const allTexts results.map(r r.data.text); await scheduler.terminate(); // 用完记得回收性能参考官方 benchmark 显示10 张图片单 Worker 串行约 45 秒4 Worker 并行约 15 秒提速约 3 倍。Worker 数量建议不超过 CPU 核心数再多边际收益反而下降。详细数据见 docs/performance.md。移动端也别卡。手机性能弱上传前先做两件事一是把图片宽度压缩到 800px 以内识别精度几乎无损二是关闭不必要的后处理比如preserve_interword_spaces: 0减少计算量。Tesseract.js 默认就跑在 Web Worker 里主线程不阻塞识别任务再重页面滚动、点击都不会被冻住。五、任务四填坑手册踩到就照这个来再顺的项目也有几个坑把高频的四个一次性交代清楚。坑 1跨域图片识别报错浏览器安全策略限制下直接识别远程图片会失败。方案是把图片转成 Base64 再喂给recognizeasync function imageToBase64(url) { const res await fetch(url, { mode: cors }); const blob await res.blob(); return new Promise(resolve { const reader new FileReader(); reader.onloadend () resolve(reader.result); reader.readAsDataURL(blob); }); } const base64 await imageToBase64(https://example.com/x.jpg); const { data: { text } } await worker.recognize(base64);坑 2语言包下载慢或加载失败首次识别要联网拉语言包内网环境必挂。解法是把核心、Worker 脚本、语言包都放到自己的静态目录用workerPath/corePath/langPath指过去const worker await Tesseract.createWorker(eng, 1, { workerPath: /static/tesseract/worker.min.js, corePath: /static/tesseract/, langPath: /static/tesseract/lang/ });完整的离线部署步骤见 docs/local-installation.md。坑 3CDN 版本悄悄升级导致行为变化固定版本号5或精确到5.x.x别用latest省得线上突然冒出玄学问题。坑 4识别中文乱码先确认语言代码写的是chi_sim而不是漏拼、多拼再确认语言包确实加载成功控制台能看到loading language traineddata字样。六、这套方案还适合谁动手前记住这 5 条到这里从一个上传框到批量识别流水线的完整链路你已经走了一遍。Tesseract.js 特别适合这几类场景前端工具站、内部系统的图片文字提取票据、名片、截图移动端 H5 的实时文字识别教育类应用的公式、试卷文字识别任何不想为 OCR 单独养一台服务器的项目最后是 5 条压箱底的最佳实践抄作业直接拿去用Worker 全局单例创建一次、处处复用绝不每次新建固定 CDN 版本生产环境锁定版本号避免自动升级破坏兼容性批量用 SchedulerWorker 数约等于 CPU 核心数别盲目堆上传前压缩图片宽 800px 以内速度和准确率兼得敏感图片前端先脱敏身份证、手机号先打码再识别数据不出浏览器。现在打开你的编辑器把第二节那段代码粘进一个 HTML 文件丢一张图片进去试试——3 分钟后你的网页就认识字了。完整的 API 参考在 docs/api.md更多玩法看 examples/遇到奇奇怪怪的问题先去 docs/faq.md 翻一翻。【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
