【开源分享】基于Mpvue的简易文字识别小程序

前言

作为一名游戏前端入行的新手程序员，这是我首次接触小程序开发。趁这几天空闲时间写了这个简单的小程序，一来是为了梳理这段时间学习到的相关知识，二来是为了熟悉一下微信小程序从申请到开发再到发布的整个流程。项目比较简单，水平也比较有限，技术上有很多不足的地方希望能够同大家互相交流。文章中对于小程序账号申请、云开发后台的搭建这些基础知识没有做过多赘述，对小程序开发不熟悉的同学可以前往微信公众平台进行了解。

项目地址

client-wordtaking

Build Setup

# 初始化项目
vue init mpvue/mpvue-quickstart myproject
cd myproject

# 安装依赖
npm install

# 填写信息
project.config.json：填入自己申请的小程序appid
cloudfunctions/ocr/index.js：填入腾讯云后台的secretId和secretKey（获取方式见下方腾讯云识别api）

# 开发时构建
npm dev

# 打包构建
npm build

技术栈

客户端：微信小程序、Mpvue
UI框架：iView Weapp
服务端：node.js、小程序云开发
OCR：腾讯云文字识别api

功能实现

• 微信授权
• 接入腾讯云文字识别api
• 从相册选取照片进行文字识别
• 从微信聊天选取图片进行文字识别
• 文字识别结果展示
• 服务器存储可用识别次数
• 每日恢复可用识别次数

功能展示

关键代码

• 云开发后台调用文字识别api

exports.main = async (event, context) => {
  let cred = new Credential("填入腾讯云secretId", "填入腾讯云secretKey");
  let httpProfile = new HttpProfile();
  httpProfile.endpoint = "ocr.tencentcloudapi.com";
  let clientProfile = new ClientProfile();
  clientProfile.httpProfile = httpProfile;
  let client = new OcrClient(cred, "ap-guangzhou", clientProfile);

  let req = new models.GeneralAccurateOCRRequest();

  let params = `{"ImageBase64":"${event.base64}"}`;
  req.from_json_string(params);

  return new Promise((resolve, reject) => {
    client.GeneralAccurateOCR(req, function (errMsg, response) {
      const _ = db.command
      const wxContext = cloud.getWXContext()
      if (errMsg) {
        reject(errMsg);
      }
      db.collection("user")
        .where({
          _openid: wxContext.OPENID
        })
        .update({
          data: {
            times: _.inc(-1)
          }
        })
        .then(res => {
          resolve(response.to_json_string());
        });
    });
  })
}

项目缺陷

腾讯云文字识别api存在图片大小3M的限制。即使项目中尝试使用了小程序提供的图片压缩接口，对于现在大多数手机拍摄照片来说这个大小也是难以满足需求的。由于对OCR这一块没有深入了解过，不知道大家有没有合适的解决方案？

项目展示

• 微信搜索“取字器”
• 小程序码