# 用 Node.js + 浏览器端 Tesseract.js 从零搭建「高拍仪申请单自动归档系统」

> 需求背景：单位每天要录入大量纸质申请单，传统方式是人工拍照、手工命名、手动归档到文件夹，效率低且容易出错。本文记录我如何用 Node.js + 浏览器端 OCR 从零搭建一套「拍摄 → OCR 识别 → 自动归档」的完整系统，全程离线、无数据库，可内网部署。

![1-登录页.png](https://developer.qcloudimg.com/http-save/yehe-12702702/c89cea3a7657defc7aa0b00d6ee171db.png)

## 技术选型

先说结论：这个场景最合适的组合是 **Node.js + Express 做服务端 + 浏览器原生 API 做拍摄与 OCR**。

- **拍摄**：直接用 `navigator.mediaDevices.getUserMedia` 调用高拍仪，无需任何原生驱动，浏览器摄像头协议统一处理
- **OCR**：Tesseract.js 在浏览器端跑 WASM，**语言包本地化**后完全离线，适合内网
- **存储**：放弃数据库，改用 JSON 配置文件 + 文件系统按日期建目录，部署零依赖

## 系统流程

整个系统核心是两条流程：

**手动流程**：开启摄像头 → 拍摄 → OCR 识别 → 人工核对 → 保存归档
**自动流程**：开启自动模式后，系统循环执行「自动拍摄 → 自动 OCR → 自动归档」，中间只留 2.5 秒换单时间

![2-主界面.png](https://developer.qcloudimg.com/http-save/yehe-12702702/880975a82fab56a25a0fca16d765ca7c.png)

## 几个关键实现

### 1. 文件名自定义命名规则

不写死命名逻辑，让用户通过占位符配置：

```
{姓名}_{门诊ID号}_{体检编号}  →  吴十_4585756_26020065.jpg
```

服务端按模板替换占位符，重名自动追加 `_1` 序号，避免覆盖。归档路径也完全可自定义，文件自动落入 `路径/YYYY-MM-DD/` 日期目录。

### 2. 自动裁边：Otsu 阈值 + 四边投影

高拍仪拍出来的照片四周是台面背景，直接送 OCR 既慢又容易误识别。我实现了自动裁边：

```js
// 1. 灰度化
// 2. Otsu 自动阈值二值化，分离纸张与背景
// 3. 判断背景明暗（四角平均亮度），背景暗则纸张为亮
// 4. 四边投影扫描找纸张边界
// 5. 边界内缩 3%，避免裁到纸张边缘阴影
// 6. 检测失败（全白/全黑/裁太小）自动回退原图
```

关键点是**安全回退**——宁可保留原图，也不误裁。

### 3. OCR 性能优化三板斧

最初识别很慢，做了三层优化：

1. **常驻 worker**：原来每次 `Tesseract.recognize()` 都会重新加载引擎和语言包，改成 `createWorker` 一次创建常驻复用，页面打开后自动后台预加载
2. **识别前预处理**：缩放到最长边 2000px 内 + 转灰度，减少处理量
3. **仅中文模型**：默认 `chi_sim` 而不是 `chi_sim+eng`，少加载一个模型

实测单张识别从"加载引擎数秒 + 识别"降到 **0.3 秒**。

![4-OCR识别结果.png](https://developer.qcloudimg.com/http-save/yehe-12702702/a9536bf8b590346dba3446446bacb4a7.png)

### 4. 字段自定义 + 自动填充

OCR 识别出的姓名、门诊ID号、体检编号等字段自动填入对应输入框，可直接用于文件命名占位符，也可手动修正。

![3-系统设置.png](https://developer.qcloudimg.com/http-save/yehe-12702702/ac58ca2b6c11b583624a6ae08d47f060.png)

## 踩坑记录

- **语言包离线**：Tesseract.js 默认从 CDN 拉语言包，内网部署必须把 `.traineddata` 本地化到 `langPath`，否则部署后无法识别
- **高拍仪横放申请单**：拍摄方向不对导致识别率低，加了两层解决——设置里配置自动旋转角度（0/90/180/270）+ 拍摄后手动旋转按钮
- **多摄像头冲突**：电脑可能同时有内置摄像头和高拍仪，做了"默认摄像头"设置 + 实时切换下拉
- **浏览器 401 跳转**：JWT 过期要自动清理 localStorage 并跳登录页，否则用户会卡在死页面

## 部署

```
npm install
npm start    # 默认 3000 端口
```

双击 `启动服务.bat` 即可启动并自动打开浏览器，配合本地化的 OCR 资源，**内网零外网依赖**。


需求背景：单位每天要录入大量纸质申请单，传统方式是人工拍照、手工命名、手动归档到文件夹，效率低且容易出错。本文记录我如何用 Node.js + 浏览器端 OCR 从零搭建一套「拍摄 → OCR 识别 → 自动归档」的完整系统，全程离线、无数据库，可内网部署。

用 Node.js + 浏览器端 Tesseract.js 从零搭建「高拍仪申请单自动归档系统」

前端

编程语言

开发工具

基于Node.js与浏览器端Tesseract.js构建高拍仪申请单自动归档系统，实现拍摄、OCR识别、自动命名与归档全流程离线运行。支持自定义文件名模板、Otsu自动裁边、OCR性能优化及字段自动填充，内网部署零依赖，有效提升纸质单据录入效率。

文件系统

代码解释

数据库

JSON

文字识别限时特惠，新用户0.5折起


CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

用 Node.js + 浏览器端 Tesseract.js 从零搭建「高拍仪申请单自动归档系统」-腾讯云开发者社区-腾讯云

用 Node.js + 浏览器端 Tesseract.js 从零搭建「高拍仪申请单自动归档系统」

用 Node.js + 浏览器端 Tesseract.js 从零搭建「高拍仪申请单自动归档系统」

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐