评论

微信小程序银行卡号的识别

微信小程序识别银行卡号

整体流程图如下:

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)
                    }
                })

            }
        })
    }
    ```
最后一次编辑于  2019-02-21  
点赞 0
收藏
评论

1 个评论

  • 小程序技术专员-拉风
    小程序技术专员-拉风
    2019-02-21

    代码格式有点乱,用markdown语法: ```

    你的代码


    ```



    2019-02-21
    赞同
    回复
登录 后发表内容