一、项目背景与需求分析

在数字化办公、教育、金融等场景中，用户常需将图片中的文字（如证件、合同、手写笔记）转换为可编辑的文本。传统方式依赖人工录入，效率低且易出错。通过小程序调用百度文字识别接口，可实现自动化图文识别，显著提升效率。

需求分解：

1. 前端：小程序提供图片上传界面，支持拍照或从相册选择。
2. 后端：Node.js服务接收图片，调用百度OCR接口处理，返回识别结果。
3. 接口：百度文字识别接口支持通用、高精度、手写等多种场景。

二、百度文字识别接口申请与配置

1. 注册百度智能云账号

访问百度智能云官网，完成实名认证，开通“文字识别”服务。

2. 创建应用并获取API Key与Secret Key

• 进入“文字识别”控制台，创建应用（如“小程序OCR服务”）。
• 获取API Key和Secret Key，用于后续接口鉴权。

3. 接口类型选择

百度OCR提供多种接口，根据需求选择：

• 通用文字识别：高精度识别印刷体。
• 高精度版：更高准确率，适合复杂背景。
• 手写文字识别：支持手写体识别。
• 表格文字识别：自动解析表格结构。

三、Node.js后端服务搭建

1. 环境准备

• 安装Node.js（建议LTS版本）。
• 初始化项目：

  mkdir ocr-server && cd ocr-server
  npm init -y
  npm install express axios crypto-js multer

2. 代码实现

2.1 生成Access Token

百度OCR接口需携带Access Token鉴权，Token有效期30天，需定期刷新。

const crypto = require('crypto');
const axios = require('axios');
// 获取Access Token
async function getAccessToken(apiKey, secretKey) {
  const url = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${apiKey}&client_secret=${secretKey}`;
  const response = await axios.get(url);
  return response.data.access_token;
}

2.2 图片上传与处理

使用multer中间件处理图片上传，限制文件大小（如2MB）。

const express = require('express');
const multer = require('multer');
const upload = multer({ limits: { fileSize: 2 * 1024 * 1024 } });
const app = express();
app.post('/upload', upload.single('image'), async (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: 'No image uploaded' });
  }
  // 调用OCR接口
  const result = await recognizeText(req.file.buffer);
  res.json(result);
});

2.3 调用百度OCR接口

封装OCR调用函数，处理图片Base64编码与接口请求。

async function recognizeText(imageBuffer) {
  const apiKey = 'YOUR_API_KEY';
  const secretKey = 'YOUR_SECRET_KEY';
  const accessToken = await getAccessToken(apiKey, secretKey);
  // 图片转Base64
  const base64Image = imageBuffer.toString('base64');
  // 调用通用文字识别接口
  const url = `https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic?access_token=${accessToken}`;
  const response = await axios.post(url, {
    image: base64Image,
    // 可选参数：语言类型、是否检测方向等
    language_type: 'CHN_ENG',
    detect_direction: true
  }, {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  });
  return response.data.words_result;
}

四、小程序前端集成

1. 页面布局

使用小程序原生组件或第三方UI库（如Vant Weapp）构建上传界面。

<!-- pages/ocr/index.wxml -->
<view class="container">
  <button bindtap="chooseImage">上传图片</button>
  <image wx:if="{{imagePath}}" src="{{imagePath}}" mode="aspectFit"></image>
  <button wx:if="{{imagePath}}" bindtap="recognizeText">识别文字</button>
  <text wx:if="{{result}}" class="result">{{result}}</text>
</view>

2. 逻辑实现

调用小程序API选择图片，通过wx.request发送至后端。

// pages/ocr/index.js
Page({
  data: { imagePath: '', result: '' },
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sourceType: ['album', 'camera'],
      success: (res) => {
        this.setData({ imagePath: res.tempFilePaths[0] });
      }
    });
  },
  recognizeText() {
    wx.showLoading({ title: '识别中...' });
    wx.uploadFile({
      url: 'https://your-server.com/upload',
      filePath: this.data.imagePath,
      name: 'image',
      success: (res) => {
        const data = JSON.parse(res.data);
        let resultText = '';
        data.forEach(item => {
          resultText += item.words + '\n';
        });
        this.setData({ result: resultText });
      },
      complete: () => wx.hideLoading()
    });
  }
});

五、优化与注意事项

1. 性能优化

• 图片压缩：前端使用canvas压缩图片，减少传输数据量。
• Token缓存：后端缓存Access Token，避免频繁请求。
• 并发控制：使用队列处理高并发请求，防止接口超限。

2. 错误处理

• 接口限流：百度OCR免费版有QPS限制（如5次/秒），需做重试机制。
• 网络异常：捕获请求错误，返回友好提示。
• 文件类型校验：后端验证图片格式（如JPEG、PNG）。

3. 安全建议

• HTTPS加密：确保传输过程安全。
• 权限控制：小程序需配置合法域名，后端接口添加鉴权（如API签名）。
• 日志记录：记录请求日志，便于排查问题。

六、扩展功能

1. 多语言支持：调用language_type参数识别多语言文本。
2. 批量处理：前端支持多图上传，后端并行处理。
3. 结果导出：将识别结果导出为Word或PDF。

七、总结

通过Node.js调用百度文字识别接口，结合小程序前端，可快速构建高效的图文识别系统。关键步骤包括接口申请、后端服务搭建、前后端联调及优化。实际开发中需关注性能、安全与错误处理，以提升用户体验。完整代码示例可参考GitHub开源项目，或根据业务需求进一步定制。