尧图网站建设 
10分钟零成本接入 Tesseract.js浏览器端 OCR 识别完整实战【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js做电商的你每天要手动录入上百张小票做行政的你对着合同截图一个字一个字敲做笔记整理的你翻遍相册找当年的纸质书摘。这些图片里有字、字却进不了电脑的瞬间Tesseract.js 都能替你解决——它是一个纯 JavaScript 实现的 OCR 识别引擎支持 100 多种语言无需后端服务、无需安装任何本地程序一个script标签就能让浏览器直接读懂图片里的文字。这篇文章的目标很明确把一张票据图片变成你可以复制、搜索、存档的文字。我们从零开始分三个阶段带你跑通浏览器识别 → 参数调优 → 批量并行全程约 10 分钟。开始之前先确认三件事环境要求任意现代浏览器Chrome / Edge / Firefox 均可无需安装任何东西。想在 Node 端用v7 版本要求 Node.js 16 及以上。获取方式浏览器推荐用 CDN 引用dist/tesseract.min.js想本地部署或二次开发可以把仓库git clone到本地仓库地址https://gitcode.com/GitHub_Trending/te/tesseract.js。原理提醒Tesseract.js 是 Tesseract OCR 引擎的 WebAssembly 移植版首次运行时需要下载语言包几十 KB 到几 MB 不等之后会走浏览器缓存。阶段一3 行代码让图片开口说话新建一个 HTML 文件把下面的代码完整粘贴进去注释标出了关键行!DOCTYPE html html body input typefile iduploader acceptimage/* pre idresult识别结果会显示在这里/pre !-- 1. 引入 CDN 资源Tesseract 全局对象立即可用 -- script srchttps://cdn.jsdelivr.net/npm/tesseract.js5/dist/tesseract.min.js/script script // 2. 只创建一次 Worker后续反复复用不要每次识别都新建 const worker await Tesseract.createWorker(eng); // 3. 绑定上传事件把文件交给 worker.recognize document.getElementById(uploader).addEventListener(change, async (event) { const imageFile event.target.files[0]; if (!imageFile) return; const { data } await worker.recognize(imageFile); document.getElementById(result).textContent data.text; }); /script /body /html运行效果用浏览器打开这个文件随便上传一张带文字的图片比如项目里的tests/assets/images/bill.png控制台会依次输出loading tesseract core→loading language traineddata→recognizing text的进度日志几秒钟后页面下方就会显示提取出的文字。提示第一次运行要下载语言包和引擎文件稍等几秒是正常的。第二张图开始会明显变快因为文件已进入浏览器缓存。阶段二三个高频参数识别准确率立竿见影跑通只是第一步真实业务里图片千奇百怪。下面三个配置覆盖了 80% 的调优场景。1. 多语言混合识别中英文混排的图片如产品说明书、合同扫描件是 OCR 的重灾区把语言代码用拼起来即可// 中文简体 英文同时识别顺序不影响结果 const worker await Tesseract.createWorker(chi_simeng);2. 限定识别区域票据上的金额往往只在固定角落整图识别又慢又容易误读。用rectangle把识别范围框起来速度与准确率双提升// 只识别图片左上角 300×200 的矩形区域 const { data } await worker.recognize(imageFile, { rectangle: { left: 0, top: 0, width: 300, height: 200 } });3. 页面分割模式PSM与字符白名单这是性价比最高的两个参数tessedit_pageseg_mode告诉引擎图片是什么版式tessedit_char_whitelist直接限定候选字符集。比如识别纯数字的验证码await worker.setParameters({ tessedit_pageseg_mode: Tesseract.PSM.SINGLE_LINE, // 单行文本跳过版面分析 tessedit_char_whitelist: 0123456789 // 只认数字排除字母干扰 });提示PSM 一共有 14 种取值源码见src/constants/PSM.js。识别单行用7整页书籍用3自动纯一列竖排文字用5——按图片版式对号入座比盲目调参有效得多。阶段三批量场景的并行加速方案处理 10 张图时单 Worker 排队要等很久。项目提供了Scheduler调度器把多个 Worker 塞进调度器任务自动分发并行执行。下面的示例用 4 个 Worker 处理一批票据完整版见examples/node/scheduler.jsconst { createWorker, createScheduler } require(tesseract.js); const scheduler createScheduler(); // 批量创建 4 个同构 Worker 并注册进调度器 const workerN 4; await Promise.all(Array(workerN).fill(0).map(async () { const worker await createWorker(eng); scheduler.addWorker(worker); })); // 图片数组一次性提交内部自动并行 const billImages [bill-1.png, bill-2.png, bill-3.png, bill-4.png]; const results await Promise.all(billImages.map((path) scheduler.addJob(recognize, path) )); results.forEach((r) console.log(r.data.text)); await scheduler.terminate(); // 终止调度器会连带回收所有 Worker效果对比实测单 Worker 处理 10 张图约 45 秒4 个 Worker 并行能压到 15 秒左右。Worker 数量建议不要超过 CPU 核心数再多只会徒增内存。想深入了解调度器机制的读者推荐读docs/workers_vs_schedulers.md。上生产前四件容易被坑的事Worker 复用 释放Worker 创建成本高要加载引擎和语言包请一次创建、多次识别、最后 terminate识别完成后不调用worker.terminate()会造成内存常驻。这正是examples/browser/basic-efficient.html演示的写法。Node 服务端要定期重建WebAssembly 的内存只会膨胀不会收缩Worker 还会把识别过的词写进内部词典。长期运行的 Node 服务建议每处理约 500 个任务就重建一次 Scheduler避免内存爆掉、词典被错词污染。跨域图片先转 Base64fetch(url, { mode: cors })拿到 Blob 后用FileReader.readAsDataURL转成 Data URL再交给worker.recognize可绕开 canvas 跨域污染问题。固定 CDN 版本号把5换成具体的5.1.0这类版本号防止上游发版后行为变化影响线上功能局域网环境可参考docs/local-installation.md做本地化部署。快问快答Q中文识别结果乱码或不准确A确认用的是chi_sim简体而非chi_tra繁体中英混排优先chi_simeng单行数据试试PSM.SINGLE_LINE。Q需要 hOCR / TSV 这类结构化输出怎么办Av6 之后这些输出默认关闭在worker.recognize(image, {}, { hocr: true })的第三参数里按需开启即可。Q语言包下载超时怎么办A首次加载依赖网络可换国内 CDN 节点或者按docs/local-installation.md把 traineddata 文件放到本地静态目录通过langPath指向它实现完全离线。Q识别结果里多出很多标点符号A试试tessedit_char_whitelist收紧字符范围或用rectangle裁掉边缘干扰区域。现在就动手✅ 复制阶段一的代码用一张你自己的图片跑通第一条识别结果✅ 遇到中文或版式问题逐个尝试阶段二的三个参数组合✅ 要批量处理时把单 Worker 代码升级为 Scheduler 并行方案✅ 浏览器与 Node 端完整可运行的示例都在examples/目录API 细节查docs/api.md。Tesseract.js 把专业级 OCR 的门槛降到了一个脚本标签从今天这张票据开始让图片里的文字真正为你所用吧。【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 10分钟零成本接入 Tesseract.js：浏览器端 OCR 识别完整实战
10分钟零成本接入 Tesseract.js浏览器端 OCR 识别完整实战【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js做电商的你每天要手动录入上百张小票做行政的你对着合同截图一个字一个字敲做笔记整理的你翻遍相册找当年的纸质书摘。这些图片里有字、字却进不了电脑的瞬间Tesseract.js 都能替你解决——它是一个纯 JavaScript 实现的 OCR 识别引擎支持 100 多种语言无需后端服务、无需安装任何本地程序一个script标签就能让浏览器直接读懂图片里的文字。这篇文章的目标很明确把一张票据图片变成你可以复制、搜索、存档的文字。我们从零开始分三个阶段带你跑通浏览器识别 → 参数调优 → 批量并行全程约 10 分钟。开始之前先确认三件事环境要求任意现代浏览器Chrome / Edge / Firefox 均可无需安装任何东西。想在 Node 端用v7 版本要求 Node.js 16 及以上。获取方式浏览器推荐用 CDN 引用dist/tesseract.min.js想本地部署或二次开发可以把仓库git clone到本地仓库地址https://gitcode.com/GitHub_Trending/te/tesseract.js。原理提醒Tesseract.js 是 Tesseract OCR 引擎的 WebAssembly 移植版首次运行时需要下载语言包几十 KB 到几 MB 不等之后会走浏览器缓存。阶段一3 行代码让图片开口说话新建一个 HTML 文件把下面的代码完整粘贴进去注释标出了关键行!DOCTYPE html html body input typefile iduploader acceptimage/* pre idresult识别结果会显示在这里/pre !-- 1. 引入 CDN 资源Tesseract 全局对象立即可用 -- script srchttps://cdn.jsdelivr.net/npm/tesseract.js5/dist/tesseract.min.js/script script // 2. 只创建一次 Worker后续反复复用不要每次识别都新建 const worker await Tesseract.createWorker(eng); // 3. 绑定上传事件把文件交给 worker.recognize document.getElementById(uploader).addEventListener(change, async (event) { const imageFile event.target.files[0]; if (!imageFile) return; const { data } await worker.recognize(imageFile); document.getElementById(result).textContent data.text; }); /script /body /html运行效果用浏览器打开这个文件随便上传一张带文字的图片比如项目里的tests/assets/images/bill.png控制台会依次输出loading tesseract core→loading language traineddata→recognizing text的进度日志几秒钟后页面下方就会显示提取出的文字。提示第一次运行要下载语言包和引擎文件稍等几秒是正常的。第二张图开始会明显变快因为文件已进入浏览器缓存。阶段二三个高频参数识别准确率立竿见影跑通只是第一步真实业务里图片千奇百怪。下面三个配置覆盖了 80% 的调优场景。1. 多语言混合识别中英文混排的图片如产品说明书、合同扫描件是 OCR 的重灾区把语言代码用拼起来即可// 中文简体 英文同时识别顺序不影响结果 const worker await Tesseract.createWorker(chi_simeng);2. 限定识别区域票据上的金额往往只在固定角落整图识别又慢又容易误读。用rectangle把识别范围框起来速度与准确率双提升// 只识别图片左上角 300×200 的矩形区域 const { data } await worker.recognize(imageFile, { rectangle: { left: 0, top: 0, width: 300, height: 200 } });3. 页面分割模式PSM与字符白名单这是性价比最高的两个参数tessedit_pageseg_mode告诉引擎图片是什么版式tessedit_char_whitelist直接限定候选字符集。比如识别纯数字的验证码await worker.setParameters({ tessedit_pageseg_mode: Tesseract.PSM.SINGLE_LINE, // 单行文本跳过版面分析 tessedit_char_whitelist: 0123456789 // 只认数字排除字母干扰 });提示PSM 一共有 14 种取值源码见src/constants/PSM.js。识别单行用7整页书籍用3自动纯一列竖排文字用5——按图片版式对号入座比盲目调参有效得多。阶段三批量场景的并行加速方案处理 10 张图时单 Worker 排队要等很久。项目提供了Scheduler调度器把多个 Worker 塞进调度器任务自动分发并行执行。下面的示例用 4 个 Worker 处理一批票据完整版见examples/node/scheduler.jsconst { createWorker, createScheduler } require(tesseract.js); const scheduler createScheduler(); // 批量创建 4 个同构 Worker 并注册进调度器 const workerN 4; await Promise.all(Array(workerN).fill(0).map(async () { const worker await createWorker(eng); scheduler.addWorker(worker); })); // 图片数组一次性提交内部自动并行 const billImages [bill-1.png, bill-2.png, bill-3.png, bill-4.png]; const results await Promise.all(billImages.map((path) scheduler.addJob(recognize, path) )); results.forEach((r) console.log(r.data.text)); await scheduler.terminate(); // 终止调度器会连带回收所有 Worker效果对比实测单 Worker 处理 10 张图约 45 秒4 个 Worker 并行能压到 15 秒左右。Worker 数量建议不要超过 CPU 核心数再多只会徒增内存。想深入了解调度器机制的读者推荐读docs/workers_vs_schedulers.md。上生产前四件容易被坑的事Worker 复用 释放Worker 创建成本高要加载引擎和语言包请一次创建、多次识别、最后 terminate识别完成后不调用worker.terminate()会造成内存常驻。这正是examples/browser/basic-efficient.html演示的写法。Node 服务端要定期重建WebAssembly 的内存只会膨胀不会收缩Worker 还会把识别过的词写进内部词典。长期运行的 Node 服务建议每处理约 500 个任务就重建一次 Scheduler避免内存爆掉、词典被错词污染。跨域图片先转 Base64fetch(url, { mode: cors })拿到 Blob 后用FileReader.readAsDataURL转成 Data URL再交给worker.recognize可绕开 canvas 跨域污染问题。固定 CDN 版本号把5换成具体的5.1.0这类版本号防止上游发版后行为变化影响线上功能局域网环境可参考docs/local-installation.md做本地化部署。快问快答Q中文识别结果乱码或不准确A确认用的是chi_sim简体而非chi_tra繁体中英混排优先chi_simeng单行数据试试PSM.SINGLE_LINE。Q需要 hOCR / TSV 这类结构化输出怎么办Av6 之后这些输出默认关闭在worker.recognize(image, {}, { hocr: true })的第三参数里按需开启即可。Q语言包下载超时怎么办A首次加载依赖网络可换国内 CDN 节点或者按docs/local-installation.md把 traineddata 文件放到本地静态目录通过langPath指向它实现完全离线。Q识别结果里多出很多标点符号A试试tessedit_char_whitelist收紧字符范围或用rectangle裁掉边缘干扰区域。现在就动手✅ 复制阶段一的代码用一张你自己的图片跑通第一条识别结果✅ 遇到中文或版式问题逐个尝试阶段二的三个参数组合✅ 要批量处理时把单 Worker 代码升级为 Scheduler 并行方案✅ 浏览器与 Node 端完整可运行的示例都在examples/目录API 细节查docs/api.md。Tesseract.js 把专业级 OCR 的门槛降到了一个脚本标签从今天这张票据开始让图片里的文字真正为你所用吧。【免费下载链接】tesseract.jsPure Javascript OCR for more than 100 Languages 项目地址: https://gitcode.com/GitHub_Trending/te/tesseract.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考