Tesseract.js 图片转文字完整实战一个 HTML 文件做出可上线的 OCR 工具【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js你有没有过这种时刻翻到一页好书想摘录一段收到一张只有图片的合同想改几个字对着聊天记录截图想复制却无从下手Tesseract.js 正是为这类场景而生的开源 OCR 引擎——它把 Tesseract 的识别能力用 WebAssembly 搬进浏览器支持 100 多种语言全程纯 JavaScript不搭后端、不用付费一个 HTML 文件就能跑起来。读完这篇文章你将掌握用一行 CDN 引入 Tesseract.js10 行代码跑通第一次识别从零打造一个可用的图片转文字小工具上传、选语言、看进度、复制结果三组误区 vs 正解把识别速度与准确率拉满批量图片并行处理的 Scheduler 正确姿势三个高频报错场景的排查清单第一关先搞清楚 Tesseract.js 是怎么跑起来的在写代码之前花 30 秒理解它的工作方式能帮你省下后面一堆排查时间。Tesseract.js 本质上是把 Tesseract OCR 引擎编译成 WebAssembly 后塞进了一个 Web Worker 里运行。也就是说识别过程不占用主线程、页面不会卡死而语言包traineddata 文件会在首次使用时按需从网络下载并缓存到浏览器。所以你会看到典型的启动流程初始化引擎 → 下载语言包 → 加载模型 → 识别图片这个过程在核心源码 src/createWorker.js 里对应得清清楚楚。版本提醒本文示例基于当前 v7 版本README 中 CDN 示例以5标注。生产环境务必锁定具体版本号避免大版本升级带来的破坏性变更详见 docs/api.md。第二关10 行代码跑通第一次 OCR先来一个最小可运行示例感受一下图片进、文字出的魔法!DOCTYPE html html body input typefile idfile acceptimage/* script srchttps://cdn.jsdelivr.net/npm/tesseract.js5/dist/tesseract.min.js/script script // createWorker 返回 Promise第二个参数 1 表示使用 LSTM 神经网络模型 Tesseract.createWorker(eng, 1).then(async (worker) { const file document.getElementById(file); file.addEventListener(change, async (e) { const { data: { text } } await worker.recognize(e.target.files[0]); alert(识别结果\n${text}); }); }); /script /body /html打开这个页面选一张带英文的图片稍等片刻就会弹出识别结果。整个识别过程的进度与状态官方演示里看得一清二楚注意createWorker之后 Worker 已经预加载完毕旧教程里常见的worker.load()已废弃不要再调用否则控制台会收到弃用警告。第三关把它升级成真正能用的图片转文字工具上面的最小示例只够演示。现在我们把三件事补齐语言可选、进度可见、结果可复制。这也是官方推荐的高效模式——Worker 全局只建一次换语言用reinitialize而不是每次识别都重新创建这点我们第四关还会展开。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title图片转文字小工具/title script srchttps://cdn.jsdelivr.net/npm/tesseract.js5/dist/tesseract.min.js/script /head body h1图片转文字工具/h1 select idlang option valueengEnglish/option option valuechi_sim简体中文/option option valuechi_simeng中英混合/option /select input typefile idpicker acceptimage/* progress idbar value0 max1/progress pre idresult/pre script let worker null; document.getElementById(picker).addEventListener(change, async (e) { const file e.target.files[0]; if (!file) return; // 第一次创建之后一直复用切换语言只做 reinitialize if (!worker) { worker await Tesseract.createWorker( document.getElementById(lang).value, 1, { logger: (m) { document.getElementById(bar).value m.progress || 0; console.log(进度: ${(m.progress * 100).toFixed(1)}%); } } ); } else { await worker.reinitialize(document.getElementById(lang).value); } const { data: { text } } await worker.recognize(file); document.getElementById(result).textContent text; }); /script /body /html语言代码用号连接即可实现混合识别chi_simeng就是简体中文英文组合完整语言清单100 种见 src/constants/languages.js。下面这张是项目测试用的标准英文样张很适合用来验证你的工具第四关三组误区 vs 正解把性能与准确率拉满工具能用了接下来要解决慢和不准两个老大难。这里最容易踩三个坑我们逐个纠正。误区一每次识别都 new 一个 Worker很多新手把createWorker写进点击事件里每张图都重新下载语言包、重新初始化引擎——第一次识别可能 10 秒之后每次还都是 10 秒。正解Worker 是重量级资源全局只创建一次之后无限复用。上面的工具代码就是标准示范官方同样推荐这个模式参考 examples/browser/basic-efficient.html。语言切换用worker.reinitialize它只会增量加载缺失的语言已加载的不再重复下载。误区二多张图片一张张排队等一次上传 10 张图用单个 Worker 串行识别总耗时是单张的 10 倍。浏览器明明有多个 CPU 核心却只用一个。正解用 Scheduler 建一个 Worker 池把任务丢进去自动分配const scheduler Tesseract.createScheduler(); // 建议 Worker 数量 CPU 核心数开太多反而因线程切换变慢 const workerCount navigator.hardwareConcurrency || 4; for (let i 0; i workerCount; i) { const worker await Tesseract.createWorker(eng); scheduler.addWorker(worker); } // 10 张图并行识别一张的耗时 ≈ 之前十张的耗时 const results await Promise.all( files.map((file) scheduler.addJob(recognize, file)) ); results.forEach((r) console.log(r.data.text)); await scheduler.terminate(); // 用完统一销毁Worker 池与单 Worker 的取舍细节官方文档 docs/workers_vs_schedulers.md 讲得很透完整示例见 examples/browser/basic-scheduler.html。误区三整张图一把梭参数一个不调识别不准时先别怪引擎——Tesseract 对场景非常敏感。比如识别下面这张账单表格混排、数字密集直接整图识别很容易串行串列正解按场景喂参数三招立竿见影// 1. 限定识别区域只认左上角 300x200 的区域减少干扰 const ret await worker.recognize(image, { rectangle: { left: 0, top: 0, width: 300, height: 200 }, }); // 2. 指定版面模式整页 vs 单行差出数倍速度 await worker.setParameters({ tessedit_pageseg_mode: Tesseract.PSM.SINGLE_LINE, // 账单金额这种单行文本 }); // 3. 字符白名单只认数字准确率飙升 await worker.setParameters({ tessedit_char_whitelist: 0123456789$.,, });PSM 全部模式定义在 src/constants/PSM.jsSINGLE_LINE之外还有SINGLE_WORD、SPARSE_TEXT等十几种按你图片的版面结构选即可。第五关三个高频报错与排查清单最后把最常见的三个翻车现场列成排查清单遇到直接对号入座。报错一跨域图片被浏览器拦截worker.recognize()直接传一个别的域名的 URL图片会被 Canvas 污染导致识别失败。两个出路后端代理转发或前端转成 Base64 再识别async function toDataUrl(url) { const res await fetch(url); // 需要目标站允许 CORS const blob await res.blob(); return new Promise((resolve) { const reader new FileReader(); reader.onload () resolve(reader.result); reader.readAsDataURL(blob); }); } const { data: { text } } await worker.recognize(await toDataUrl(url));报错二语言包加载超时或失败首次识别需要从官方服务器拉取 traineddata网络不稳就容易超时。方案是让语言包走你自己的服务器在createWorker时传入langPath指向本地目录并按 docs/local-installation.md 把文件放对位置cachePath、cacheMethod还能控制缓存策略让二次加载秒开。报错三识别成功了但结果里没有框选坐标和置信度这是 v6 以来的破坏性变更为了默认更轻更快除纯文本外的输出hocr、tsv、blocks、pdf默认全部关闭。如果你需要带布局信息的 hocr 或 PDF必须在recognize的第三个参数里显式开启const ret await worker.recognize(image, {}, { hocr: true, pdf: true }); console.log(ret.data.hocr);排查时顺手确认一下createWorker的第二个参数OEM1是默认的 LSTM 模型如果某天你发现识别结果特别差先怀疑是不是参数传成了0旧引擎。收尾这套方案适合谁三条最佳实践Tesseract.js 的浏览器端集成最适合这几类需求前端工具站的截图提字、移动端 H5 的票据扫描、企业内部系统的图片归档检索以及教育类应用的公式与文字识别——共同点是不想为 OCR 专门养一个后端服务。最后送你三条保命实践Worker 全局单例创建一次、反复recognize最后统一terminate这是性能与内存的双保险。批量走 SchedulerWorker 数量对齐 CPU 核心数别贪多Promise.all一把梭。按场景喂参数rectangle 限定区域 PSM 选版面 白名单收窄字符集三个组合拳打下来准确率通常有明显提升。更完整的 API 说明见 docs/api.md更多官方示例在 examples/调参细节可对照 docs/performance.md。现在打开编辑器把上面的工具代码贴进一个 HTML 文件选一张图片试试——你离图片进、文字出只差一个文件了。【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考