基于百度AI开放平台的银行卡识别功能

基于百度AI开发平台的银行卡识别功能

一、 前期效果设想

1.1点击文本框效果

点击input框，上传本地银行卡照片，图片加载于指定位置

1.2调用接口

调用百度的公用接口，显示识别到的银行卡号、银行名称、银行卡类型等信息

二、 效果实现

2.1 html+css

2.1.1 上传本地文件   

<label for="picture" class="btn">上传文件</label>

<input type="file" id="picture" class="picture"  capture="camera" > 

capture="camera"  手机端可以开启拍照功能

此处特别说明，因为文本框的type设file后，提交按钮右侧会自动显示上传的图片路径，这肯定是与需求不符合的。因此使用以下css样式，达到需求的效果（当然，还可以直接

给input框设透明度为0，用按钮覆盖在上面，但个人觉得这个办法实属强求）

input.picture {position: absolute;clip: rect(0 0 0 0);}

2.2 js（上传图片到指定位置，调用接口）

2.2.1 文档浏览

文档地址：https://ai.baidu.com/ai-doc/OCR/ak3h7xxg3

首次阅读，粗略浏览即可，只需掌握此次接口的调用的大概流程

二次阅读，从头精读文档，上手（此处精读仅限于有用的内容，你要是连标题都精读，那我只能讲一句，“确定过眼神，阁下真是个真诚的可人儿”）

1.   请求 access_token

文档地址：https://ai.baidu.com/ai-doc/REFERENCE/Ck3dwjhhu

①登录百度智能云-管理中心

https://console.bce.baidu.com/ai/?_=1617268217138#/ai/ocr/overview/index

②左侧导航栏 >

找到人工智能à文字识别à创建应用（随意即可）à管理应用

此时，映入眼帘即为

 

此时我们就可以去获取access-token了

此处提供两种获取办法

A：bash

curl -i -k 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【百度云应用的AK】&client_secret=【百度云应用的SK】'

 

B：node

var https = require('https');
var qs = require('querystring');
 
const param = qs.stringify({
    'grant_type': 'client_credentials',
    'client_id': '您的 Api Key',
    'client_secret': '您的 Secret Key'
});
 
https.get(
    {
        hostname: 'aip.baidubce.com',
        path: '/oauth/2.0/token?' + param,
        agent: false
    },
    function (res) {
        // 在标准输出中查看运行结果
        res.pipe(process.stdout);
    }
);

 

2.   设置图片存放到指定位置，并返回base64格式图片路径

请学习FileReader.readAsDataURL()

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

 //1.上传银行卡，将其展示在指定位置
var fileUpload = document.getElementById("picture");
var showPicture = document.querySelector(".identity_bank");

fileUpload.onchange = function(){
    var file = this.files;
    //图片路径
    // console.log(file);
    var reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.onload = function () {
        var image = document.createElement("img");
        image.src = reader.result; 
        showPicture.appendChild(image);
        
        var imageURL = image.src;
        var strartIndex = imageURL.indexOf(',');
        var imgCode = imageURL.substring(strartIndex+1);
   }
}

 

3.   使用ajax调接口，获取数据

①请求方式推荐post

②url：https://aip.baidubce.com/rest/2.0/ocr/v1/bankcard？access-token= 【此处是你请求到的access-token】

③设置请求头headers

Content-Type：application/x-www-form-urlencoded

④请求参数data：

Image：base64格式的图片路径

⑤返回结果result

（详情见文档说明：https://ai.baidu.com/ai-doc/OCR/ak3h7xxg3）

源码：github（https://github.com/Heidi-sean/Daily-demo/tree/main/credit%20card%20identity）

 ps：小女子目前也只是未入职场的新手，欢迎前辈指出代码不足之处