免服务器3步搞定图片转文字Tesseract.js 前端OCR实战指南【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js深夜十一点你对着电脑屏幕正把一百张账单里的数字一行行敲进表格。手指发酸眼睛发花最气人的是还敲错了几笔。这种重复劳动本不该由人来干——如果图片里的字能被程序直接读出来就好了。Tesseract.js 就是干这个的它是 100% 纯 JavaScript 的 OCR 引擎支持 100 多种语言的图片转文字直接在浏览器里运行不用搭服务器、不用装任何环境。今天我就带你把这个流程完整走一遍从引入到批量识别读完你也能亲手把看图说话变成现实。一、先别急着搭服务器纯前端为什么够用说起 OCR 文字识别我第一反应也是老一套后端装个 Python 环境、部署 Tesseract 二进制或者干脆接付费云 API。结果呢环境依赖能把人磨疯账单图片还得先上传到别人服务器上隐私也是个坎。试错几轮后我才明白这类需求纯前端就够。Tesseract.js 的聪明之处在于它把 Google 开源的 Tesseract OCR 引擎编译成了 WebAssembly让浏览器自己就能完成文字识别运算。使用方式更是简单到离谱——CDN 引一行脚本万事俱备script srchttps://cdn.jsdelivr.net/npm/tesseract.js5/dist/tesseract.min.js/script这段代码解决怎么把 OCR 能力装进网页的问题。刷新页面后在控制台敲一个Tesseract能看到完整的 API 对象就说明引擎已经就位连一行构建配置都不用写。二、3行代码让浏览器读懂第一张图引擎就位接下来做最小验证。我写了个带文件上传框的页面选中图片的瞬间就把文字弹出来input typefile iduploader acceptimage/* script // 创建 Worker 只需一次之后反复复用不要每次识别都新建 const worker await Tesseract.createWorker(eng, 1, { logger: m console.log(进度: ${(m.progress * 100).toFixed(1)}%) }); document.getElementById(uploader).addEventListener(change, async (e) { const file e.target.files[0]; if (!file) return; const { data: { text } } await worker.recognize(file); // 一行识别返回文本 alert(识别结果:\n${text}); }); /script这段代码解决从图片到文本的核心链路创建 Worker → 喂图片 → 拿文本。控制台会实时打印加载语言包 30% → 识别图片 70%这样的进度选一张印刷清晰的英文图片几秒后弹窗里就是规整的原文。第一次跑通时我盯着弹窗激动了半天——原来看图识字真的可以这么轻。三、识别出来全是乱码语言包先对上我兴冲冲拿中文账单一试输出一屏天书。查了文档才反应过来OCR 引擎默认只加载了英文语言包中文当然认不出。Tesseract.js 支持 100 多种语言把语言代码用拼起来就是多语言混合识别中文简体是chi_sim// 中英文混合识别语言包按需加载 const worker await Tesseract.createWorker(chi_simeng); const { data: { text } } await worker.recognize(mixed.png); console.log(text); // 中文英文都能读出来这段代码解决识别结果乱码的根因——语言不匹配。换对语言包后同一张图输出立刻变成可读的混合文本。下面是项目里的一张英文诗歌测试图识别这类排版规整的正文准确率相当可观 小贴士常用语言代码有eng英文、chi_sim简体中文、chi_tra繁体中文、jpn日文、kor韩文。完整列表在项目文档docs/tesseract_lang_list.md里用到哪种语言先查代码再写别凭感觉猜。四、账单表格乱糟糟把识别范围框起来语言对了新的烦恼又来了整页识别的账单表格行经常串在一起数字和描述糊成一团。这时候要靠两招收窄——一是用矩形参数只识别指定区域二是用字符白名单告诉引擎我只要数字// 只识别账单表格区域left/top/width/height 按像素指定 const { data: { text } } await worker.recognize(billImage, { rectangle: { left: 0, top: 80, width: 957, height: 200 } }); // 限定只识别数字和小数点大幅提升数字准确率 await worker.setParameters({ tessedit_pageseg_mode: Tesseract.PSM.SINGLE_BLOCK, // 按整块文字识别 tessedit_char_whitelist: 0123456789.- });这段代码解决表格识别串行、数字易错的痛点。setParameters里最常用的分页模式就三档记住够用参数值适用场景PSM.AUTO默认页面结构未知自动判断PSM.SINGLE_BLOCK单一文本块如表格区域PSM.SINGLE_LINE一行文字如单据编号下图是项目测试用的银行账单截图把识别区域框到表格上、再配合数字白名单后金额列基本能做到零差错提取五、100张账单怎么一次跑完Scheduler 并行单张识别搞定了可一百张排队跑还是慢。Tesseract.js 的解法叫 Scheduler——一个调度器管着一组 Worker任务进来自动分发多个 Worker 并行干活// 创建调度器并注册 4 个 Worker const scheduler Tesseract.createScheduler(); for (let i 0; i 4; i) { scheduler.addWorker(await Tesseract.createWorker(eng)); } // 批量提交识别任务Promise.all 并行等待 const results await Promise.all( imageFiles.map(file scheduler.addJob(recognize, file)) ); const allTexts results.map(r r.data.text); await scheduler.terminate(); // 一次性回收所有 Worker这段代码解决单 Worker 排队导致批量处理太慢的问题。在我机器上4 个 Worker 并行处理一批图片耗时大约只有单 Worker 的三分之一到四分之一。注意 Worker 数量不是越多越好建议不超过 CPU 核心数否则线程切换反而拖慢速度。六、识别失败、卡在加载这几个坑我替你踩过了走到这一步剩下的基本就是各种边角料问题了我把最常见的三个一次性说清。跨域图片读不了。直接拿远程 URL 喂给recognize会被跨域策略拦下。稳妥做法是先把图片转成 Base64 再识别async function toBase64(url) { const res await fetch(url); // 服务端需允许跨域 const blob await res.blob(); return new Promise(r { const reader new FileReader(); reader.onloadend () r(reader.result); reader.readAsDataURL(blob); }); } const { data: { text } } await worker.recognize(await toBase64(imgUrl));每次识别都新建 Worker。这是新手最容易踩的性能坑。创建 Worker 要重新下载、加载语言包成本很高。正确姿势是页面加载时建一次全局复用参考examples/browser/basic-efficient.html的模式。语言包加载超时。内网或网络受限时语言包可能拉不下来。可以指定本地路径兜底const worker await Tesseract.createWorker(eng, 1, { langPath: /local-tessdata, // 语言包放本地 workerPath: /local-worker.js });⚠️ 注意workerPath和corePath指向本地文件时路径必须与部署目录严格对应写错会静默失败——控制台没报错、任务却不执行先检查这两条路径。三句话记住这套方案一路下来你会发现Tesseract.js 把图片转文字的复杂度压到了最低CDN 引入、创建 Worker、调用recognize三步就走通了全流程。给你留三条实践心法Worker 全局复用别每次新建——语言包加载是最贵的一步省下来就是几倍的性能差距。先查语言代码再配识别范围——语言对不上白忙一场表格类图片记得用rectangle加字符白名单。批量任务交给 Scheduler——Worker 数量对齐 CPU 核心数提速明显又不至于过载。现在复制上面第一章的 HTML 代码到你的项目里选一张手头的图片跑起来——亲眼看到文字被读出来的那一刻你就真正上手了。从今晚的加班表格开始把重复劳动交给浏览器吧。【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考