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

写在前面：
实现的逻辑是拍照上传调用后端封装好的身份证接口，然后同时调用七牛云接口把照片传过去以便后台管理系统审核看
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 = thisvar 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, // 默认9sizeType: ['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// debuggerif (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.htmlthat.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
}