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

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

时间：2018-10-27 17:28:05

写在前面：实现的逻辑是拍照上传调用后端封装好的身份证接口，然后同时调用七牛云接口把照片传过去以便后台管理系统审核看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.jsconst util = require('../../utils/util.js');const qiniuUploader = require("../../utils/qiniuUploader");import api from '../../utils/api.js';const apiurl = '';const imgPath = '/';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 = ""var https = ""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}