微信小程序利用百度AI实现扫描身份证获取信息功能

悠悠 2023-06-30 02:24 5阅读 0赞

### 目录 ###

*  前言
 *  百度端创建应用
 *  实现过程
 *  结语

### 前言 ###

微信小程序集成百度图像识别功能，实现对上传或拍照的身份证进行扫描，并获取身份证信息。

### 百度端创建应用 ###

1.  访问网址[https://login.bce.baidu.com/][https_login.bce.baidu.com]，选择“人工智能”--“图像识别”；
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70][]
    
     
2.  在栏目“应用列表”下新建应用，并勾选项目需要的接口；保存后列表会生成对应的“API Key”和“Secret Key”。
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1][]

### 实现过程 ###

1.  为了演示方便，页面只放了一个上传按钮，代码如下：
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2][]
    
     
2.  test.js文件存放逻辑代码，如下图：
    
        // pages/test/test.js
        Page({
        
          /**
           * 页面的初始数据
           */
          data: {
            baiduToken: ''
          },
        
          /**
           * 生命周期函数--监听页面加载
           */
          onLoad: function(options) {
            this.getBaiduToken();
          },
          // 获取百度access_token
          getBaiduToken: function() {
            const apiKey = '生成的API Key';
            const seckey = '生成的Secret Key';
            const tokenUrl = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${apiKey}&client_secret=${seckey}`;
        
            let that = this;
            wx.request({
              url: tokenUrl,
              method: 'POST',
              dataType: 'json',
              header: {
                'content-type': 'application/json; charset=UTF-8'
              },
              success: function(res) {
                console.log('getBaiduToken提示pass', res);
                that.setData({
                  baiduToken: res.data.access_token
                })
              },
              fail: function(res) {
                console.log('getBaiduToken提示fail', res);
              }
            })
          },
          // 上传图片
          uploadImg: function() {
            let that = this;
            wx.chooseImage({
              count: 1,
              sizeType: ['original', 'compressed'],
              sourceType: ['album', 'camera'],
              success(res) {
                // tempFilePath可以作为img标签的src属性显示图片
                const tempFilePaths = res.tempFilePaths
                console.log(tempFilePaths)
                // 路径转化为base64图片
                wx.getFileSystemManager().readFile({
                  filePath: tempFilePaths[0],
                  encoding: 'base64',
                  success: res => {
                    console.log('读图片数据pass', res.data);
                    that.scanImageInfo(res.data);
                  },
                  fail: res => {
                    console.log('读图片数据fail', res.data);
                  }
                })
              }
            })
          },
          // 扫描图片中的数据
          scanImageInfo: function(imageData) {
            let that = this;
            const detecUrl = 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + this.data.baiduToken;
        
            wx.showLoading({
              title: '加载中',
            });
            wx.request({
              url: detecUrl,
              data: {
                image: imageData,
                id_card_side: 'front'
              },
              method: 'POST',
              dataType: 'json',
              header: {
                'content-type': 'application/x-www-form-urlencoded'
              },
              success: res => {
                console.log('success', res.data.words_result)
              },
              fail: res => {
                console.log('fail')
              },
              complete: res => {
                wx.hideLoading();
              }
            })
          }
        })
    
     
3.  真机调试获取数据如下（预览获取数据有问题）：
    
    ![2020011511450643.jpg][]

### 结语 ###

文中以小程序为例，也可以实现其它语言，只需修改为相应的API即可。

[https_login.bce.baidu.com]: https://login.bce.baidu.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200114135223679.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200114135249922.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200114145757268.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0,size_16,color_FFFFFF,t_70
[2020011511450643.jpg]: https://img-blog.csdnimg.cn/2020011511450643.jpg