简介一款专为前端开发者设计的轻量级 OCR 识别工具基于 JavaScript/ECMAScript 编写支持在浏览器端直接完成图片文字识别无需后端服务介入代码简单有效能显著降低文本提取功能的集成门槛。无需深入理解 OCR 底层算法即可快速集成到页面中。当前版本主要支持英文与数字识别适用于验证码处理、发票自动填写、截图文字提取等场景后续规划扩展汉字识别应用范围将更广。资源包共5个文件包含核心库脚本、可直接运行的示例页面以及 png/jpg 格式测试图片压缩包仅 536KB结构紧凑便于快速部署到现有项目中。目前已有 5383 人学习使用。开发者获得的是完整源码既可以按照附带示例迅速调用也可以深入核心逻辑做定制优化例如调整识别参数或针对特定图像预处理从而满足不同项目的实际需求。1. 前端 ocr.js 能做什么一个纯前端的图片文字识别方案后台管理系统里要识别身份证号、截图里要提取一串订单号、上传的合同图片要转成可搜索文本这类需求过去多半要调云端识别接口或者让后端接一个 OCR 服务然后前端等结果、处理报错、处理鉴权。前端 ocr.js 的思路是另一种把识别模型直接搬到浏览器里纯前端完成图片文字识别不经过业务服务器离线也能跑。这个标题里的识别图片器并不夸张借助 WebAssembly 和 Web Worker识别引擎确实能在浏览器里运行而且对中小图片的识别速度能控制在秒级。适合用这个方案的人是那些不想为偶尔识别几张图专门搭后端服务、又在意数据不出浏览器的前端工程师也适合做离线工具、浏览器插件、内网部署场景的开发者。当然它也有边界识别精度和速度受设备性能影响复杂表格和手写字体的效果不如重型云端方案。下文按原理 → 最小实现 → 参数调优 → 坐标玩法的顺序展开全是可直接抄的写法。2. 为什么纯前端能做 OCRocr.js 的引擎与 Worker 原理2.1 从 Tesseract 到浏览器WASM 让 OCR 引擎在本地跑起来前端 ocr.js 这一类库底层大多数是 Tesseract.js 在浏览器端的封装。Tesseract 本身是 C 写的 OCR 引擎识别时依赖两部分一是引擎程序二是针对具体语言的训练数据文件比如中文简体是chi_sim.traineddata。纯前端方案的核心是用 Emscripten 把 C 引擎交叉编译成 WebAssemblyWASM然后在浏览器里加载执行。语言数据文件也是静态资源放到可访问的路径下即可不需要服务器做任何计算。识别流程大致是这样的图片先被绘制到 Canvas 上再通过getImageData拿到像素数据转成引擎需要的格式引擎对图像做二值化、连通域分析、字符切分最后用 LSTM 模型完成字符识别输出文本和每个词的置信度与坐标框。这些计算如果在主线程跑UI 会卡死所以 ocr.js 内部开了 Web Worker识别过程在后台线程执行主线程只接收进度回调和最终结果。Worker 里跑 WASM再加上语言数据文件可能十几 MB首次加载会有明显等待这是所有纯前端 OCR 方案的共同特点。2.2 前端 OCR 与云端识别接口的选型差异纯前端方案和云端接口不是替代关系而是适用场景不同我在项目里一般按一个表格来卡选型对比项前端 ocr.js本地识别云端 OCR 接口网络要求初始化后完全离线必须联网数据隐私图片不出浏览器图片要上传到第三方延迟受设备 CPU 影响小图秒级受网络和排队影响通常百毫秒级费用无调用费按次计费或包年识别精度印刷体足够复杂版面较弱强在复杂表格、手写、印章等场景部署成本前端引入依赖、配好资源申请密钥、后端转发、计费告警这里有个容易被忽略的点前端 OCR 的免费是要用用户设备计算的低端手机上识别一张 1080p 截图可能要好几秒而且直出 JS 包和语言包体积并不小。反过来如果用户要识别的图本身就要上传做存档那就不如直接在浏览器里完成识别把文本和原图一起提交后端省一次额外请求。2.3 Worker 加载资源时的稳定策略用 ocr.js 时Worker 和 WASM 的加载路径是最容易出问题的环节。库内部会自己创建 Worker 并动态加载核心文件你可以通过参数覆盖默认路径这在内网部署和离线场景下是关键能力。常见做法是让前端项目在构建时把 wasm 文件、worker 脚本、语言包放到静态资源目录然后显式指定路径而不是依赖 CDN。CDN 方式虽然写 Demo 方便生产环境会因为网络波动出现 Worker 初始化失败而且内网用户根本加载不了外站资源。加载状态可以通过 logger 回调观察正常会依次出现loading tesseract core、initializing tesseract、loading language traineddata、initializing api、recognizing text几个阶段。如果在loading language traineddata卡住优先检查语言包路径和网络如果直接报Error opening data file说明路径配置错了。记住一条经验先确认资源独立请求都能拿到 200再排查代码逻辑。3. 用 ocr.js 在本地跑通图片文字识别的最小实现3.1 依赖引入npm 包和 CDN 两条路安装依赖的方式有两种。常规工程项目用 npmnpm install tesseract.js随后在代码里导入createWorker。CDN 方式适合写 Demo 或做纯静态页面直接在 HTML 引脚本标签即可。无论哪种方式库的版本和语言包版本要匹配否则会出现识别结果乱码或者语言数据加载失败。我通常固定一个大版本锁死依赖避免无声升级带来行为变化。CDN 引用之外还要注意一个细节语言包文件是超大资源中文简体语言包chi_sim.traineddata大约十几 MB首次访问会全量下载之后靠浏览器 HTTP 缓存兜底。内网离线场景必须把语言包放到本地静态资源目录再通过langPath参数指过去。3.2 一份可直接运行的最小识别代码下面这段代码是我在工程里用的最小骨架。假设页面有一个img idtargetImg src./demo.png目标是把图片里的文字识别出来并显示到页面上import { createWorker } from tesseract.js; // 1. 创建 Worker并指定语言和识别引擎 const worker await createWorker(chi_sim, 1, { logger: m { // 通过 logger 观察识别进度m.status 是阶段标识m.progress 是 0~1 的进度 console.log(${m.status}: ${Math.round(m.progress * 100)}%); } }); // 2. 开始识别image 可以是 img 元素、canvas 或 dataURL const image document.getElementById(targetImg); const { data } await worker.recognize(image); // 3. 识别结果的核心字段 console.log(data.text); // 识别出的纯文本 console.log(data.confidence); // 总体置信度0~100 console.log(data.words); // 每个词的坐标和置信度 // 4. 识别完成释放 Worker 资源 await worker.terminate();代码的逻辑分四段第一步createWorker创建后台识别线程其中chi_sim指用中文简体语言包1表示用 LSTM 引擎第二步recognize把图片喂给引擎内部会自行处理 Canvas 绘制和像素转换第三步从返回值里取文本和置信度第四步terminate终止 Worker不调用的话浏览器会一直持有这个后台线程。logger参数很多人不写但实际排查问题时非常有用它能告诉你当前卡在下载语言包还是正在识别识别阶段还能看到逐行进度。参数说明里最关键的是语言参数。识别纯中文用chi_sim中英文混排建议写成chi_simeng此时引擎会同时加载两个语言包速度会变慢但是召回率明显提升。千万别写engchi_sim语言顺序和识别质量无关关键是有连接符表示多语言模式。第二个参数1是 OCR 引擎模式OEM0是传统引擎1是 LSTM 引擎3是两者自动选择一般固定用1。3.3 从文件选择到识别readAsDataURL 的正确姿势实际业务里用户通常是上传图片而不是页面里已有img。文件上传场景有一个经典坑直接拿File对象给worker.recognize虽然也能跑但在一些浏览器版本下不可靠。我一般先把文件读成 dataURL 再用const fileInput document.getElementById(uploadInput); fileInput.addEventListener(change, async (e) { const file e.target.files[0]; if (!file) return; // 用 FileReader 读成 dataURL避免图片跨域污染后续的 OCR 画布 const dataUrl await new Promise((resolve, reject) { const reader new FileReader(); reader.onload () resolve(reader.result); reader.onerror reject; reader.readAsDataURL(file); }); const { data } await worker.recognize(dataUrl); console.log(data.text); });这里用readAsDataURL而不是URL.createObjectURL原因在于后续引擎内部需要把图片绘制到 Canvas 再取像素如果用对象 URL 加载远程图片且响应头没有 CORS 授权Canvas 会被标记为被污染导致getImageData直接抛安全错误。readAsDataURL得到的是 base64 字符串相当于把图片数据完整放进当前文档域天然不触发跨域问题。代价是内存占用增加约三分之一可接受。3.4 识别结果的数据结构不只是 text 一个字段data.text是最直观的结果但data.words才是做图片识别与坐标点击的入口。words是数组每个元素描述一个识别出的词包含text、confidence、bbox等字段。bbox里有x0、y0、x1、y1四个坐标值表示这个词在原图上的矩形范围。这个能力在后面做自动化点击、区域提取时极其有用。中间层级data.lines和data.paragraphs按行和段落聚合了words做版面分析时按需遍历即可。识别过程全部在 Worker 线程执行主线程可以继续响应用户操作不用加 loading 遮罩也能保持页面流畅。4. 图片识别精度调优ocr.js 的 3 个必调参数与图片预处理4.1 第一个参数psm 页面分割模式怎么选Tesseract 的识别流程依赖如何理解页面结构psmPage Segmentation Mode参数控制的就是这个。默认值是3全自动页面分割但在识别单行文字、单块文字或稀疏文本时默认值反而会让引擎去分析版面结构白白损失精度。这个参数设置在recognize的第二个参数里const { data } await worker.recognize(image, { // PSM 7 表示把图片当作单行文本识别适合验证码、标题这类场景 psm: 7 });常用psm的模式我整理成一张表按场景选择即可psm 值含义适用场景3全自动页面分割但不做方向检测默认值适合整页截图、文档扫描6把图片当作一个统一文本块段落清晰的合同、文章截图7把图片当作单行文本验证码、导航栏、一句话标题11尽量稀疏的文本顺序不定坐标零散的商品标签、ID 卡局部13不分割把整张图当一行原始线单行数字、特殊排版psm选错最常见的现象识别结果里文本顺序错乱或者行与行之间混出乱七八糟的空格。如果发现明明只有一行字结果却识别出三行直接把psm调到7或13。需要说明的是psm: 13不做任何版面分析所以如果是多行文本它会强行当一行输出效果反而更差务必按场景试。4.2 第二个参数logger、cacheMethod 与 OEM 引擎模式logger不只是看进度还能定位问题。比如识别一直停在 0%说明图片像素数据没有正确传给引擎常见原因是图片还没加载完成就调了recognize如果进度走完但结果是空文本多半是图片本身文字太浅或者背景干扰太多。做工程踩过坑之后我会把日志级别在开发环境打开生产环境关掉避免每识别一张图都在控制台刷几十条日志。cacheMethod参数控制语言数据和 worker 的缓存策略默认值足够但要注意在单页应用里如果频繁创建和销毁 Worker每个 Worker 都要重新加载语言包会非常慢。可选的优化是用cacheMethod: none完全禁用缓存配合手动管理 Worker 生命周期让一个长驻 Worker 反复识别多张图而不是每张图都重新 create。识别引擎模式OEM上面提过固定1即可0是老版本模型放今天精度已经不理想。4.3 第三个参数白名单压缩字符集当识别目标明确是数字和字母时可以传tessedit_char_whitelist限制引擎只输出指定字符能明显降低误识别率。典型场景是识别订单号、手机号、验证码const { data } await worker.recognize(image, { psm: 7, tessedit_char_whitelist: 0123456789- });白名单的作用不是加速识别而是把输出空间收窄让引擎在犹豫时偏向表内字符。比如订单号里字母O和数字0容易混限制只输出数字和横线后准确率会有可感知的提升。中文场景同样适用但白名单要写完整漏掉字符会直接导致识别缺失宁可多写不要少写。需要注意该参数在 LSTM 引擎下的支持不如传统引擎完整实测时如果发现白名单不生效改用 OEM 为0的传统引擎试试。4.4 图片预处理的四个步骤缩放、灰度、二值化与降噪Tesseract 引擎对输入图像比较敏感直接喂原图往往效果一般尤其是手机拍的倾斜照片、带水印的截图、深色背景浅色字这类图片。我一般用 Canvas 做一轮预处理再识别。下面代码把图片调整到合适大小、转灰度、再做二值化function preprocessImage(img, targetWidth 1200) { // 1. 按目标宽度等比缩放过大的图片先缩小 const scale targetWidth / img.naturalWidth; const width targetWidth; const height Math.round(img.naturalHeight * scale); const canvas document.createElement(canvas); canvas.width width; canvas.height height; const ctx canvas.getContext(2d); // 2. 绘制第一遍顺便把图片压缩到合理尺寸 ctx.drawImage(img, 0, 0, width, height); // 3. 读取像素做灰度化和二值化 const imageData ctx.getImageData(0, 0, width, height); const data imageData.data; for (let i 0; i data.length; i 4) { // 灰度公式加权平均人眼对绿色更敏感 const gray data[i] * 0.299 data[i 1] * 0.587 data[i 2] * 0.114; // 二值化阈值设为 128大于阈值变白否则变黑 const binary gray 128 ? 255 : 0; data[i] binary; data[i 1] binary; data[i 2] binary; } ctx.putImageData(imageData, 0, 0); return canvas; }这段代码做三件事缩放、灰度化、二值化。缩放的意义在于控制像素量OCR 引擎并不需要识别 4000px 宽的原始大图超过一定宽度反而会因为字符太粗而误切分一般 1000 到 1500px 是甜点区间等于是前端用 Canvas 做了一次无损压缩。灰度化的公式里三个权重对应 RGB 通道的人眼敏感度直接取平均值也能用但对比度会差一些。二值化把图像变成纯黑白最典型的收益是去除彩色水印和背景纹理。阈值 128 是经验值如果文字本身偏浅需要调低到 100 左右或者反过来用自适应阈值不过那就要引入更重的图像处理库了。4.5 预处理和语言包的配合中英文混排识别识别中英文混排时语言包用chi_simeng同时预处理阶段不要做太激进二值化因为中文笔画密集阈值不当会把笔画烧断。我的习惯是彩色图先灰度化但保留灰度层次交给引擎自己去处理只有水印和底色干扰严重时才二值化。另外一个土办法很有效把大图按视觉区域切成多个小块分别识别再按坐标拼接结果比整图识别更快也更准。这个思路在第五章会用到坐标框本来就是现成的。5. 进阶玩法用 ocr.js 的识别坐标做区域提取与点击定位5.1 从 words 里取出目标文字的坐标框前端 ocr.js 识别结果里不只有文本还有blocks、paragraphs、lines、words四级结构。做图片识别与坐标点击这类自动化功能时核心是拿到目标文字的bbox。遍历words数组并筛选就能定位到确定按钮、下一页标签之类的区域const { data } await worker.recognize(image, { psm: 11 }); // 定位包含指定关键词的词条坐标 function findWordCoordinates(words, keyword) { const matched words.filter(word word.text.includes(keyword)); if (matched.length 0) return null; // 如果有多个匹配取置信度最高的那一个 matched.sort((a, b) b.confidence - a.confidence); const top matched[0]; return { text: top.text, confidence: top.confidence, x: top.bbox.x0, y: top.bbox.y0, width: top.bbox.x1 - top.bbox.x0, height: top.bbox.y1 - top.bbox.y0, // 中心点坐标在元素点击、坐标标注场景最常用 centerX: Math.round((top.bbox.x0 top.bbox.x1) / 2), centerY: Math.round((top.bbox.y0 top.bbox.y1) / 2) }; } // 用法示例 const btn findWordCoordinates(data.words, 确认); console.log(btn); // 输出: { text: 确认, confidence: 96.3, x: 120, y: 88, width: 42, height: 24, centerX: 141, centerY: 100 }psm: 11在这里很关键。常规的整页分割会让引擎按照阅读顺序排列 words而 psm 11 适合稀疏文本每个词独立识别坐标更贴合原始位置。匹配关键词时用includes而不是全等比较因为引擎偶尔会在词里混入空格或标点全等匹配会漏掉。多匹配取最高置信度是为了避免页面上出现多个同样的关键词时误中非目标元素。拿到坐标之后可以把这个矩形画在 Canvas 上做可视化验证也可以把中心坐标交给自动化框架做模拟点击实现识别到按钮位置然后自动操作的流程。5.2 区域识别只切出目标区域再识别又快又准整图识别精度不够的另一个解法是局部识别先把图片上某个区域裁剪出来放大后再交给 ocr.js。比如识别身份证号先把图片按比例裁剪出号码区域放大两倍再做灰度化和识别。裁剪用 Canvas 的drawImage九参数版本可以一步完成function cropAndScale(img, sx, sy, sw, sh, targetWidth) { const scale targetWidth / sw; const canvas document.createElement(canvas); canvas.width targetWidth; canvas.height Math.round(sh * scale); const ctx canvas.getContext(2d); // 从原图 (sx, sy) 位置裁剪 sw*sh 区域绘制到目标画布 ctx.drawImage(img, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height); return canvas; }区域识别有两个直接收益一是把文字放大后字符笔画更清晰LSTM 引擎准确率显著上升二是排除了周围无关文字的干扰引擎不会因为版面复杂而误切分。配合上一章的 psm 参数可以用更小的语言包加更高的置信度完成任务。5.3 验证识别效果的三个习惯识别完成后别急着用养成三个验证习惯。第一把data.words的坐标框画到 canvas 上肉眼检查框是否贴合文字框偏了说明预处理阶段缩放比例和识别时用的图片尺寸不一致。第二看confidence分布如果整体低于 60通常不是参数问题而是图片质量不行需要重新截图或调整预处理。第三记录每次识别的耗时和语言包加载耗时识别慢于 5 秒的图片优先做缩放加载慢的检查语言包路径确认走的是本地缓存而不是每次都全量重新下载。这三个习惯能帮你快速判断问题出在图片、参数还是资源路径上。本文还有配套的精品资源点击获取