整体流程图如下:
1、小程序调起摄像头
<camera device-position=“back” flash=“off” binderror=“error” mode=“normal” style=“width: 100%; height: 300px;”></camera>
<button type=“primary” bindtap=“takePhoto”>拍照</button>
2、拍摄照片并把照片转化为base64编码
拍摄的照片路径为临时路径,所以需要转化为base64编码
takePhoto() {
const me = this;
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'normal',
success: (res) => {
const fs = wx.getFileSystemManager();
fs.readFile({
filePath: res.tempImagePath,
encoding: 'base64',
success(res) {
}
})
}
})
},
3、图片传送给第三方云平台ocr 接口(这里是以百度云举例)
1、获取第三方云平台的token
const token = await identificationCard.getToken({
query: {
grant_type: 'client_credentials',
client_id: '自己申请的账号',
client_secret: '自己申请的密钥'
}
})
2、第三方云平台解析拍摄的银行卡
identificationCard.getCardDetail返回的card就是相应图片中银行卡信息
const card = await identificationCard.getCardDetail(token.data.access_token, {
query: {
image: base64
},
method: "POST"
})
4、完整代码
wxml
<camera device-position=“back” flash=“off” binderror=“error” mode=“normal” style=“width: 100%; height: 300px;”></camera>
<button type=“primary” bindtap=“takePhoto”>拍照</button>
api
const identificationCard = {
getToken: (params) => wxRequest(params, 'https://aip.baidubce.com/oauth/2.0/token'),
getCardDetail: (query, params)=> wxRequest(params, 'https://aip.baidubce.com/rest/2.0/ocr/v1/bankcard?access_token='+query),
}
js
async getCardDetail(base64){
const token = await identificationCard.getToken({
query: {
grant_type: 'client_credentials',
client_id: '自己申请的账号',
client_secret: '自己申请的密钥'
}
})
const card = await identificationCard.getCardDetail(token.data.access_token, {
query: {
image: base64
},
method: "POST"
})
}
takePhoto() {
const me = this;
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'normal',
success: (res) => {
const fs = wx.getFileSystemManager();
fs.readFile({
filePath: res.tempImagePath,
encoding: 'base64',
success(res) {
me.getCardDetail(res.data)
}
})
}
})
}
```
代码格式有点乱,用markdown语法: ```
你的代码
```