36k Star 的 OCR 前端 SDK 轻松上手图像识别

什么是图像 OCR 技术

大家平时在处理图片的时候,有没有遇到过需要把图片里的文字提取出来的情况?比如一些扫描的文档、拍下来的菜单或者街上的广告牌照片。要是能直接把这些文字"读"出来,是不是方便很多?这就是图像 OCR(光学字符识别)技术能干的事儿。

它就像给程序装上了一双能看懂文字的"眼睛",不管文字在图片里还是文档扫描件里,都能被识别出来,然后转化成我们可以编辑、搜索的文本格式。听起来是不是很神奇?

基于图像 OCR 的开源方案分享

今天就给大家分享一个超厉害的开源项目------Tesseract.js。

它是什么

Tesseract.js 是一个用 JavaScript 写的库,能从图片里提取出各种语言的文字。不管是浏览器环境还是服务器环境,它都能轻松应对。是不是很厉害?

怎么用

如果你要在网页里用,最简单的方法就是用 CDN 引入:

xml 复制代码
<!-- v5 版本 -->
<script src='<https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js>'></script>

然后,你就能用 Tesseract.createWorker 来创建一个工作线程,开始你的文字识别之旅啦。

或者,如果你喜欢用 import 语法,可以去 https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.esm.min.js 拿到 ESM 构建。

如果你想在 Node.js 项目里用,得先安装它。用 npm 或 yarn 都行:

csharp 复制代码
# 最新版本
npm install tesseract.js
yarn add tesseract.js

# 旧版本
npm install tesseract.js@3.0.3
yarn add tesseract.js@3.0.3

使用方法

安装好之后,用起来也很简单。比如,你想从一张图片里提取英文文字,可以这样写:

ini 复制代码
import { createWorker } from 'tesseract.js';

(async () => {
  const worker = await createWorker('eng');
  const ret = await worker.recognize('<https://tesseract.projectnaptha.com/img/eng_bw.png>');
  console.log(ret.data.text);
  await worker.terminate();
})();

要是你有很多图片要处理,记得先创建一个工作线程,然后对每个图片都运行 worker.recognize,最后再运行 worker.terminate(),这样效率更高。

它能干啥

Tesseract.js 的目标是把 Tesseract OCR 引擎(一个很厉害的独立项目)带到浏览器和 Node.js 里。它通过包装 Tesseract 的 WebAssembly 端口来实现。注意哦,它不修改 Tesseract 的核心功能,所以有些限制,比如 不支持 PDF 文件,也不会去改 Tesseract 的识别模型来提高准确率。

如果你的项目需要一些超出它能力的功能,比如从 PDF 里提取文字,可以看看 Scribe.js,它是个替代方案,专门用来满足这些额外需求。

官方Demo

图像识别:

视频实时识别:

最后

交个朋友 [撇嘴] ,私发9 。获取 Tesseract.js 链接

相关推荐
CoderJia程序员甲19 分钟前
GitHub 热榜项目 - 日榜(2026-05-03)
ai·大模型·llm·github·ai教程
有一个好名字27 分钟前
Agent Loop —— 一切从那个 while 循环开始
前端·javascript·chrome
一天睡25小时28 分钟前
Claude Code 指令入门教程
前端
EF@蛐蛐堂29 分钟前
【js】浏览器滚动条优化组件OverlayScrollbars
开发语言·javascript·ecmascript
yingyima1 小时前
正则表达式实战:从日志中精准提取关键字段
前端
TeamDev1 小时前
如何在 DotNetBrowser 中使用本地 AI 模型
前端·后端·.net
谢尔登1 小时前
10_从 React Hooks 本质看 useState
前端·ubuntu·react.js
辰同学ovo1 小时前
从全局登录状态管理学习 Redux
前端·javascript·学习·react.js
爱看书的小沐1 小时前
【小沐杂货铺】基于Three.js绘制三维艺术画廊3DArtGallery (Three.js,WebGL)
javascript·3d·webgl·three.js·babylon.js·三维画廊
yyuuuzz1 小时前
aws 基础认知与实践注意点
运维·服务器·网络·云计算·github·aws