小程序调用阿里云身份证识别OCR（附带七牛云上传图片）

一时失言乱红尘 2022-03-07 19:30 172阅读 0赞

--------------------

*  写在前面：
 *  实现的逻辑是拍照上传调用后端封装好的身份证接口，然后同时调用七牛云接口把照片传过去以便后台管理系统审核看
 *  1:首选需要这么一张页面

![图片描述][1890761234-5c77960fdffbd_articlex]

*  接下来就写我是怎么做的

## 首先是布局（以下是wxml） ##

<view>
      <view class='idcard'>
        <image class="idcard_front" catchtap='uploadImageFront' src="{
        {idCardUrlFront}}"></image>
        <view class='idcard_front_desc'>扫描身份证人像面</view>
      </view>
    
      <view class='idcard'>
       <image class="idcard_front" catchtap='uploadImageBack' src="{
        {idCardUrlBack}}"></image>
        <view class='idcard_front_desc'>扫描身份证国徽面</view>
      </view>
    
      <view class="submit {
        {islogo?'logo_bg':'logo_disabled'}}" catchtap='submit'>下一步</view>
    </view>

## 接着来写样式，要来就来全套不是，哈哈哈 ##

/* pages/idcard/index.wxss */
    
    .idcard {
      text-align: center;
      margin: 100rpx auto;
    }
    .logo_disabled {
      /* background: #FADFCB; */
      background: rgba(255, 173, 118, 0.40);
    }
    
    .logo_bg {
      background: #ffad76;
    }
    
    .idcard_front, .idcard_con {
      height: 370rpx;
      width: 580rpx;
    }
    
    .myCanvas {
      width: 600rpx;
      height: 450rpx;
      visibility: hidden;
      position: absolute;
    }
    
    .judgeCanvas {
      width: 2px;
      height: 2px;
      visibility: hidden;
    }
    
    .idcard_front_desc{
      font-size: 30rpx;
      color: #666666;
      margin-top: 20rpx;
    }
    .submit {
      height: 80rpx;
      width: 622rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      text-align: center;
      color: #fff;
      font-size: 32rpx;
      margin: 50rpx auto 40rpx;
      /* background: #ffad76; */
    }

## 接着就是最重要的js了（我直接全选复制，各位见谅，封装的七牛云上传和wx.request在下面?） ##

// pages/idcard/index.js
    const util = require('../../utils/util.js');
    const qiniuUploader = require("../../utils/qiniuUploader");
    import api from '../../utils/api.js';
    const apiurl = 'https://yuesao.wutongdaojia.com';
    const imgPath = 'https://cdn.wutongdaojia.com/';
    
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        x: 0,
        y: 0,
        areaWith: 750,
        areaHeight: 750,
        idCardUrlFront: '../../imgs/front.png',
        idCardUrlBack: "../../imgs/back.png",
        imagewidth: '',
        imageheight: '',
        base64: '',
        islogo:false,
        headerImage: '',
        picValue: '',
        showMagnifyIdCard: false,
        hasServerMsg: false,
        auth: {},
        // android: util.browser.versions.android
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function() {
        // helper.checkOrientation('judgeCanvas');
      },
      uploadImageFront() {
        var that = this
        // front 代表正面
        that.checkIdCard(that, 'front', function(res) {
          wx.setStorageSync('address', res.address)
          wx.removeStorageSync('cardErrFront')
          wx.setStorage({
            key: 'idcardFront',
            data: {
              address: res.address,
              birthday: res.birthday,
              code: res.code,
              name: res.name,
              nation: res.nation,
              sex: res.sex,
            }
          })
          that.checkIsSuc()
        })
      },
      uploadImageBack() {
        var that = this
         // back 代表反面
        that.checkIdCard(that, 'back', function(res) {
          wx.setStorageSync('issue', res.issue)
          wx.removeStorageSync('cardErrBack')
          wx.setStorage({
            key: 'idcardBack',
            data: {
              expiryDate: res.expiryDate, // 结束日期
              issue: res.issue, //签发籍贯
              issueDate: res.issueDate, // 开始日期
            }
          })
          that.checkIsSuc()
        })
      },
      checkIsSuc() {
        var that = this
        var address = wx.getStorageSync('address')
        var issue = wx.getStorageSync('issue')
    
        if (address && issue) {
          that.setData({
            islogo: true
          })
        }
      },
      checkIdCard(that, type, callback) {
        util.getUploadToken()
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            var tempFilePaths = res.tempFilePaths;
            that.qiniuUploader(that, tempFilePaths[0], function(res) {
              console.log(res)
              if (type == "front") {
                that.setData({
                  idCardUrlFront: imgPath + res.key
                })
                wx.setStorageSync('idCardFrontUrl', imgPath + res.key)
                that.uploadFile(that, type, tempFilePaths, that.data.idCardUrlFront, function(res) {
                  console.log(res)
                  callback(res)
                })
              } else {
                that.setData({
                  idCardUrlBack: imgPath + res.key
                })
                wx.setStorageSync('idCardBackUrl', imgPath + res.key)
                
                that.uploadFile(that, type, tempFilePaths, that.data.idCardUrlBack, function(res) {
                  console.log(res)
                  callback(res)
                })
              }
            })
    
            // that.getIdcardInfo('front')
          }
        })
      },
      qiniuUploader(that, filePath, callback) {
        qiniuUploader.upload(filePath, (res) => {
            console.log(res)
            callback(res)
          }, (error) => {
            console.error('error: ' + JSON.stringify(error));
          },
          null, // 可以使用上述参数，或者使用 null 作为参数占位符
          (progress) => {
            // console.log('上传进度', progress.progress)
            // console.log('已经上传的数据长度', progress.totalBytesSent)
            // console.log('预期需要上传的数据总长度', progress.totalBytesExpectedToSend)
          }, cancelTask => that.setData({
            cancelTask
          })
        )
      },
      /*图片上传*/
      uploadFile(that, idCardSide, files, idCardUrl, callback) {
        wx.uploadFile({
          url: apiurl + '/weixin/getIdcardInfo', //里面填写你的上传图片服务器API接口的路径 
          filePath: files[0], //要上传文件资源的路径 String类型 
          name: 'file', //按个人情况修改，文件对应的 key,开发者在服务器端通过这个 key 可以获取到文件二进制内容，(后台接口规定的关于图片的请求参数)
          header: {
            "Content-Type": "multipart/form-data" //记得设置
            // "Content-Type": "image/jpeg" //记得设置
          },
          formData: {
            //和服务器约定的token, 一般也可以放在header中
            'token': wx.getStorageSync('token'),
            'idCardSide': idCardSide,
            'idCardUrl': idCardUrl
          },
          success: function(res) {
            //当调用uploadFile成功之后，再次调用后台修改的操作，这样才真正做了修改头像
            console.log(JSON.parse(res.data))
            var responce = JSON.parse(JSON.parse(res.data).data)
    
            if (res.status = 200) {
              if (responce.code == 1) {
                callback(responce.result)
              } else {
                wx.showToast({
                  title: responce.msg,
                  icon: 'none',
                  duration: 1000
                })
                if (idCardSide =="front"){
                  wx.setStorageSync('cardErrFront', responce.msg)
                }else{
                  wx.setStorageSync('cardErrBack', responce.msg)
                }
                return
              }
    
            } else {
              wx.showToast({
                title: responce.msg,
                icon: 'none',
                duration: 1000
              })
              return
            }
          }
        })
      },
      submit() {
        var address = wx.getStorageSync('address')
        var issue = wx.getStorageSync('issue')
        var cardErrFront = wx.getStorageSync('cardErrFront')
        var cardErrBack = wx.getStorageSync('cardErrBack')
        if(!this.data.islogo) return
        // debugger
        if (cardErrFront) {
          wx.showToast({
            title: '人像面'+cardErrFront+'，请重新上传',
            icon: 'none',
            duration: 1000
          })
          return
        } else if (cardErrBack){
          wx.showToast({
            title: '国徽面' + cardErrBack + '，请重新上传',
            icon: 'none',
            duration: 1000
          })
          return
        } else if (!address) {
          wx.showToast({
            title: '请上传身份证人像面',
            icon: 'none',
            duration: 1000
          })
          return
        } else if (!issue) {
          wx.showToast({
            title: '请上传身份证国徽面',
            icon: 'none',
            duration: 1000
          })
          return
        } else {
          wx.navigateTo({
            url: '../editcard/index',
          })
        }
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        wx.removeStorageSync('address')
        wx.removeStorageSync('issue')
        wx.removeStorageSync('cardErrFront')
        wx.removeStorageSync('cardErrBack')
        wx.removeStorage({
          key: 'idcardFront',
          success: function(res) {
            console.log(res)
          },
        })
        wx.removeStorage({
          key: 'idcardBack',
          success: function(res) {
            console.log(res)
          },
        })
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function() {
    
      },
    ## 标题文字 ##
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function() {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function() {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function() {
    
      }
    })

## 封装wx.request来了（api.js） ##

/** 使用方法
     *@method ajax
     *@param{参数类型}参数名 参数说明
     * Type：请求类型（get、post）
     * params：请求参数
     * url：请求地址
     */
    
    // http('dataUrl', param).then(res => {
    //       ...
    //     })
    const ajax = (Type, params, url) => {
      var methonType = "application/json";
      // var https = "http://www.wutongdaojia.com"
      var https = "https://yuesao.wutongdaojia.com"
      var st = new Date().getTime()
      if (Type == "POST") {
        methonType = "application/x-www-form-urlencoded"
      }
      return new Promise(function (resolve, reject) {
        wx.request({
          url: https + url,
          method: Type,
          data: params,
          header: {
            'content-type': methonType,
            'Muses-Timestamp': st,
            'version': 'v1.0' // 版本号
            // 'Muses-Signature': sign
          },
          success: function (res) {
            // if (res.statusCode != 200) {
            //   reject({ error: '服务器忙，请稍后重试', code: 500 });
            //   return;
            // }
            // resolve(res.data);
            wx.hideLoading()
            console.log(res)
            if (res.data.status == 200) {
              resolve(res.data);
            } else if (res.data.status == 400) {
              wx.showToast({
                title: res.data.message,
                icon: 'none',
                duration: 1000
              })
              return
            } else if (res.data.status == 401){
              wx.removeStorageSync('phone')
              wx.removeStorageSync('token')
              wx.showToast({
                title: res.data.message,
                icon: 'none',
                duration: 1000,
                success:function(){
                  wx.navigateTo({
                    url: '../login/index',
                  })
                }
              })
              return
            } else {
              //错误信息处理
              wx.showToast({
                title: '服务器错误，请联系客服',
                icon: 'none',
                duration: 1000
              })
            }
          },
          fail: function (res) {
            // fail调用接口失败
            reject({ error: '网络错误', code: 0 });
          },
          complete: function (res) {
            // complete
          }
        })
      })
    }
    
    module.exports = {
      ajax: ajax
    }

## util.js ##

*  如需帮助请加微信（18310911617）  
    备注：说明来意

[1890761234-5c77960fdffbd_articlex]: /images/20220307/0f11cd10bc0b4bb0973d372b108a50b1.png