基於百度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：小女子目前也只是未入職場的新手，歡迎前輩指出代碼不足之處