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

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

    图片描述

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

    首先是布局（以下是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

    const qiniuUploader = require("./qiniuUploader") // 此文件需七牛云官方下载;
import api from './api.js';
const getUploadToken = () => {
  var params = {
    token: wx.getStorageSync('token')
  }
  api.ajax("GET", params, "/weixin/getUploadToken").then(res => {
    console.log(res.data)
    initQiniu(res.data)
  });
}
// 初始化七牛相关参数
const initQiniu = (uptoken) => {
  var options = {
    region: 'NCN', // 华北区
    // uptokenURL: 'https://[yourserver.com]/api/uptoken',
    // cdn.wutongdaojia.com
    // uptokenURL: 'http://upload-z1.qiniup.com',
    // uptokenURL: 'https://yuesao.wutongdaojia.com/weixin/getUploadToken',
    // uptoken: 'xxx',
    uptoken: uptoken,
    // domain: 'http://[yourBucketId].bkt.clouddn.com',
    domain: 'image.bkt.clouddn.com',
    shouldUseQiniuFileName: false
  };
  qiniuUploader.init(options);
}

export function didPressChooesImage(that, count, callback) {
  getUploadToken();
  // 微信 API 选文件
  wx.chooseImage({
    count: count,
    success: function(res) {
      console.log(res)
      var filePath = res.tempFilePaths[0];
      console.log(filePath)
      callback(filePath)
      // 交给七牛上传
    }
  })
}

/**
 * 文件上传
 * 服务器端上传：http(s)://up.qiniup.com
 * 客户端上传： http(s)://upload.qiniup.com
 * cdn.wutongdaojia.com
 */
function uploader(file, callback) {
  initQiniu();
  qiniuUploader.upload(filePath, (res) => {
      // 每个文件上传成功后,处理相关的事情
      // 其中 info 是文件上传成功后，服务端返回的json，形式如
      // {
      //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
      //    "key": "gogopher.jpg"
      //  }
      // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
      that.setData({
        'imageURL': res.imageURL,
      });
    }, (error) => {
      console.log('error: ' + error);
    },
    // , {
    //     region: 'NCN', // 华北区
    //     uptokenURL: 'https://[yourserver.com]/api/uptoken',
    //     domain: 'http://[yourBucketId].bkt.clouddn.com',
    //     shouldUseQiniuFileName: false
    //     key: 'testKeyNameLSAKDKASJDHKAS'
    //     uptokenURL: 'myServer.com/api/uptoken'
    // }
    null, // 可以使用上述参数，或者使用 null 作为参数占位符
    (res) => {
      console.log('上传进度', res.progress)
      console.log('已经上传的数据长度', res.totalBytesSent)
      console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
    });
};
module.exports = {
  initQiniu: initQiniu,
  getUploadToken: getUploadToken,
  didPressChooesImage: didPressChooesImage
}
    • 如需帮助请加微信（18310911617）
      备注：说明来意
    • 闲暇之余写了个小程序：不二颜究所，欢迎搜索～
    七牛云问答小程序七牛云存储上传图片javascripthtml5
    biage
    35 声望2 粉丝

    爱旅行，爱摄影，爱生活！

    « 上一篇
    小程序上传图片到七牛云（支持多张上传，预览，删除）
    下一篇 »
    如何让网站变灰？

    引用和评论

    推荐阅读
    头像
    uniapp 内嵌 unity

    biage阅读 1.3k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.7k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新