图片里的文字怎么一键变成可复制文本零配置浏览器端 OCR 识别方案全指南【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js每次收到一张截图、票据或扫描件都得手动把上面的文字敲进文档表格里那串数字还要对着图片一个字符一个字符核对如果你的日常工作里经常出现图片转文字的需求那么本文介绍的 tesseract.js 会是一个能让你彻底告别手动输入的浏览器端 OCR 文字识别方案。tesseract.js 是一个纯 JavaScript 编写的 OCR光学字符识别引擎支持超过 100 种语言的图片文字提取无需安装任何本地软件、无需搭建后端服务一个script标签就能在网页里跑起来。它的核心思路是把经典的 Tesseract OCR 引擎编译成 WebAssembly让识别能力在浏览器中零配置可用——你上传一张图片它返回可复制的纯文本。这项目适合谁先花 30 秒对号入座你的场景是否推荐原因前端工具站要做图片文字提取功能✅ 强烈推荐纯前端实现无需后端部署成本几乎为零移动端 H5 里做扫码件、票证的文字识别✅ 推荐支持 Web Worker不阻塞 UI体积可控Node.js 服务端批处理文档✅ 推荐提供完整 Node API可与现有任务队列结合需要识别手写体❌ 不推荐引擎针对印刷体优化手写识别效果差需要直接解析 PDF❌ 不推荐需先用其他库把 PDF 渲染成图片再识别一句话总结凡是图里有字、字要变成文本的需求尤其是想在前端完成、不想碰后端的环境tesseract.js 都值得一试。项目源码、示例与完整文档都可以从项目仓库获取官方示例集中在examples/目录遇到问题可查阅docs/faq.md。第一层5 分钟跑通第一次文字识别我们先做一个最基础的 HTML 页面用户选择一张图片页面把识别出的文字弹出来。全程只需要引入一个 CDN 脚本。!DOCTYPE html html head !-- 引入 CDN 资源加载后全局会多一个 Tesseract 对象 -- script srchttps://cdn.jsdelivr.net/npm/tesseract.js5/dist/tesseract.min.js/script /head body input typefile iduploader acceptimage/* script // 创建 Worker第一个参数是语言第二个参数是引擎模式(1LSTM)可省略 const worker await Tesseract.createWorker(eng, 1, { logger: m console.log(进度: ${m.status} ${Math.round(m.progress * 100)}%) }); document.getElementById(uploader).addEventListener(change, async (e) { const file e.target.files[0]; if (!file) return; // 识别图片返回结果对象文本在 data.text 里 const { data: { text } } await worker.recognize(file); alert(识别结果:\n${text}); }); /script /body /html用浏览器打开这个文件选一张清晰的印刷体图片试试。控制台里你会看到loading tesseract core→initializing api→recognizing text的进度日志首次运行需要下载约 2MB 的语言包之后会缓存到浏览器 IndexedDB第二次打开就快多了。下面这张是项目测试素材里的标准 OCR 测试图白底黑字的印刷体适合用来验证你的第一行代码是否跑通温馨提示上面的示例把createWorker放在了页面加载时执行。生产环境更推荐用户点击上传按钮后再创建 Worker避免每个访客都白白下载语言包官方示例 examples/browser/basic-efficient.html 就是这种写法。第二层常用配置一个参数切换识别语言跑通第一跑之后你会很快遇到两个高频需求识别中文和只提取图片的某一块区域。一个参数切换识别语言tesseract.js 支持 100 语言语言代码之间用拼接即可实现多语言混合识别// 中英文混合识别中文简体 英文 const worker await Tesseract.createWorker(chi_simeng); // 识别结果直接可用 const { data: { text } } await worker.recognize(image);完整语言代码清单含繁体、日语、韩语等见项目文档docs/tesseract_lang_list.md。注意多语言混合时语言包会叠加下载网络环境不佳时建议只加载真正需要的语言。一个对象限定识别区域票据、证件这类图片通常只需要局部文字用rectangle参数圈定区域既能提升准确率也能省去后期裁剪// 只识别图片左上角 300x200 的区域 const { data: { text } } await worker.recognize(imageFile, { rectangle: { left: 0, top: 0, width: 300, height: 200 } });下面这张是项目测试素材里的票据流水单带表格和金额数字非常适合用来体验局部识别 数字提取的组合拳用 setParameters 微调识别行为识别数字、单行文本等特定场景配合setParameters效果立竿见影await worker.setParameters({ // 页面分割模式只识别一行速度更快 tessedit_pageseg_mode: Tesseract.PSM.SINGLE_LINE, // 字符白名单只输出数字排除字母干扰 tessedit_char_whitelist: 0123456789 });Tesseract.PSM对象下还有SINGLE_WORD、SINGLE_BLOCK、AUTO等多种模式定义见src/constants/PSM.js分别对应不同版面结构按图选型即可。第三层性能调优批量图片如何做到又快又稳单张图片识别很快但面对几十上百张图时一个 Worker 顺序处理会让人等到崩溃。tesseract.js 提供了Scheduler调度器来管理一组 Worker 并行干活。// 1. 创建调度器并往里面塞 4 个 Worker const scheduler Tesseract.createScheduler(); for (let i 0; i 4; i) { const worker await Tesseract.createWorker(eng); scheduler.addWorker(worker); } // 2. 把图片数组一次性丢进去Promise.all 等全部完成 const results await Promise.all(imageFiles.map(file scheduler.addJob(recognize, file) )); // 3. 汇总所有识别文本 const allTexts results.map(r r.data.text); // 4. 任务结束统一销毁scheduler.terminate() 会连带销毁全部 Worker await scheduler.terminate();性能调优的几条经验项目文档docs/performance.md里有详细论证这里帮你提炼Worker 一定要复用recognize可以反复调用用完别销毁销毁重建的成本远高于识别本身。Worker 数量别贪多每个 Worker 都占用较高内存建议不超过 CPU 核心数超过后反而因资源竞争变慢甚至崩溃。提前预热在用户真正选图之前就把 Worker 建好首次识别耗时能大幅下降。保持默认缓存语言包缓存机制从 v4 起已修复不要轻易设置cacheMethod: none。实战演练一个完整的上传识别小工具把前面三层知识点串起来写一个可直接复制运行的完整页面支持中英文识别、显示进度条、批量选择图片并行处理还带一个限定识别区域的开关。!DOCTYPE html html head meta charsetutf-8 script srchttps://cdn.jsdelivr.net/npm/tesseract.js5/dist/tesseract.min.js/script style #progress { width: 100%; height: 8px; background: #eee; display: none; } #progress div { height: 100%; background: #4caf50; width: 0; transition: width .2s; } /style /head body input typefile iduploader acceptimage/* multiple labelinput typecheckbox idareaOnly 只识别左上方 400x200 区域/label div idprogressdiv idbar/div/div pre idoutput/pre script // 复用 Worker 池4 个中英混合 Worker 挂在调度器下 const scheduler Tesseract.createScheduler(); for (let i 0; i 4; i) { const worker await Tesseract.createWorker(chi_simeng, 1, { logger: m { if (m.status recognizing text) { const pct Math.round(m.progress * 100); document.getElementById(bar).style.width pct %; } } }); scheduler.addWorker(worker); } document.getElementById(uploader).addEventListener(change, async (e) { const files [...e.target.files]; if (!files.length) return; document.getElementById(progress).style.display block; document.getElementById(output).textContent 识别中...; // 每个文件生成一个识别任务可带独立的 rectangle 参数 const areaOnly document.getElementById(areaOnly).checked; const jobs files.map(file scheduler.addJob(recognize, file, {}, { rectangle: areaOnly ? { left: 0, top: 0, width: 400, height: 200 } : undefined })); const results await Promise.all(jobs); document.getElementById(output).textContent results.map((r, i) 【文件 ${i 1}】\n${r.data.text}).join(\n\n); }); /script /body /html把这段代码存成 HTML 打开选几张中英文混排的图片体验一下批量任务会被自动分发到 4 个 Worker 上并行处理进度条实时反馈结果按文件顺序输出。这就覆盖了 tesseract.js 90% 的日常用法。再给你一张项目里的书页扫描图印刷体小字号多段落适合检验默认参数在真实书籍场景下的表现踩坑锦囊高频报错对照表现象原因解决方案Cannot find module/ Worker 加载失败构建工具webpack/Vite重排了文件找不到 worker 脚本手动指定workerPath指向本地node_modules/tesseract.js/dist/worker.min.js中文识别出一堆乱码或空白语言代码写错或漏了中文语言包使用createWorker(chi_simeng)正确加载简体中文首次加载极慢进度卡在下载阶段语言包较大网络不稳定提前预热 Worker生产环境可将语言包与核心文件部署到自己的静态资源服务器配置langPath与corePath远程图片报跨域错误浏览器同源策略拦截了图片读取先用fetchFileReader把图片转成 Base64 再传给recognize手写体/模糊图片识别结果极差引擎只针对印刷体训练预处理图片放大、转灰度、提高对比度后再识别识别结果与命令行 Tesseract 不一致默认oem、psm参数与 CLI 不同显式设置oem和tessedit_pageseg_mode保持一致其中跨域图片是最常见的问题这里给出 Base64 转换的兜底写法async function loadImageAsBase64(url) { const resp await fetch(url, { mode: cors }); const blob await resp.blob(); return new Promise(resolve { const reader new FileReader(); reader.onloadend () resolve(reader.result); reader.readAsDataURL(blob); }); } // 用法把远程图片转成 Base64 再识别 const base64 await loadImageAsBase64(https://example.com/pic.jpg); const { data: { text } } await worker.recognize(base64);收尾总结三条最佳实践与资源入口回看整个流程tesseract.js 的核心价值就一句话把专业 OCR 引擎搬进浏览器让图片文字提取从重部署变成轻脚本。无论是给工具站加个截图识字功能还是给 H5 应用做票据识别它都能在不动后端的情况下完成。最后给你三条实战守则固定版本号CDN 链接写死5这类版本避免自动升级带来的行为变化。全局复用一个 Worker 池单图用 Worker、批量用 Scheduler绝不每张图新建一个 Worker。先预处理再识别模糊、倾斜、低对比度的图片先在前端做放大、旋转、灰度化识别率提升明显项目还内置了自动旋转预处理能力可参考文档docs/api.md中的相关选项。想深入了解这几个入口值得收藏官方示例集examples/browser/与examples/node/覆盖 CDN、Scheduler、图片预处理等场景API 参考docs/api.md性能优化策略docs/performance.md常见问题答疑docs/faq.md现在就把文章里的第一个示例复制到本地跑起来吧5 分钟后你就拥有一个属于自己的浏览器端 OCR 文字识别工具了。【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考