微信小程序：实现证件OCR识别

公司要求在小程序证件上传时，自动识别证件（身份证、户口本）等，自动填入表单中，达到提升用户体验。

方案

解决此问题，有几种方案:

方案	识别率	成本
公司部署OCR模型，调后端接口	低	高
纯前端OCR方案	低	中
百度证件OCR识别服务	高	-

三种方案中，我们综合考虑，百度提供的接口服务最好的方案，因为正确率高，响应速度快，成本根据用户的量关联的。所有第三种方案可行。大家也可以使用其他厂商的API服务~

实现思路：

获取百度云的baidu_access_token ---> 用户在小程序端选择图片--->图片转换base64 --->请求百度云OCR服务

代码实现

获取百度云的baidu_access_token

js 复制代码

/**
 * 使用 AK，SK 生成鉴权签名（Access Token）
 * @return string 鉴权签名信息（Access Token）
 */
export default function getAccessToken() {
  let options = {
    method: "POST",
    url:
      "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=" +
      AK +
      "&client_secret=" +
      SK,
  };
  return new Promise((resolve, reject) => {
    request(options)
      .then((res) => {
        console.log(res, "获取token成功");
        uni.setStorageSync("baidu_access_token", res.access_token);
      })
      .catch((error) => {
        console.log(error, "获取token失败");
        uni.showToast({
          title: "获取token失败",
          icon: "none",
        });
        reject(error);
      });
  });
}

用户在小程序端选择图片

使用uniapp 或微信小程序的选择相册接口，也可以使用uview的upload组件。我这里使用的是upload组件

js 复制代码

  <u-upload :fileList="fileList1" @afterRead="(e) => afterRead(e)">
  </u-upload>

图片转换base64

js 复制代码

// 转换为base64的函数
function toBase64(path) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: path,
      responseType: "arraybuffer",
      success: (res) => {
        resolve(uni.arrayBufferToBase64(res.data));
      },
    });
  });
}

请求百度云OCR服务

js 复制代码

export default function cardOCR(imageUrl) {
  const access_token = uni.getStorageSync("baidu_access_token");
  const options = {
    method: "POST",
    url: `https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=${access_token}`,
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    data: {
      id_card_side: "front",
    },
  };
  options.headers["Access-Token"] = access_token;

  return new Promise((resolve, reject) => {
    toBase64(imageUrl).then((res) => {
      options.data.image = res;
      request(options)
        .then((res) => {
          if (res.words_result_num > 0) {
            resolve(res.words_result);
          }
        })
        .catch((error) => {
          reject(error);
        });
    });
  });
}

结语

友好推荐：闪图浏览器插件，作者开发的插件；解决写文章没有表情包使用，如何保存，管理表情包的烦恼； juejin.cn/post/751636...