前端图像文字信息识别接入文档

---

一，获取token

注册baidu AL云账号，登录选择图像识别，创建应用

image.png

拿到API Key 和Secret Key,请求百度获取Token接口

fetchToken: async function() {
    let vm = this;
    let params = {
        grant_type:'client_credentials',
        client_id:'Dt79Wwpqd4GmqPVZ9NmdkXYo',
        client_secret:'VPyB2M7RdptgDkkjjP4dL6BbXwUB2qPa'
    };
    const res = await vm.http.get('/oauth/2.0/token', params);
    if(!res){
        return
    }
    let result = res.data;
    vm.token = result.access_token;
},

ps:,如果是vue应用，一定要配置代理，调用接口的url去掉域名前缀，域名的配置写到`vue.config.js`文件里面
'/oauth/*': {
    target: 'https://aip.baidubce.com/',
    changeOrigin: true,
    secure: false
},

二，身份证信息识别

通过file标签上传/拍照图片，change事件里面拿到base64文件流，再调用身份识别接口

changepic() {
    let vm = this;
    let reads = new FileReader();
    let f = document.getElementById('file').files[0];
    reads.readAsDataURL(f);
    reads.onload = function (e) {
        vm.image = this.result;
        vm.spinShow = true;
        vm.fetchInfo();
    };
},

/**
 * 识别图片信息
 */
fetchInfo() {
    let vm = this;
    $.ajax({
        type: "POST",
        url: "/rest/2.0/ocr/v1/idcard",
        data: {
            access_token:vm.token,
            image:vm.image.replace("data:image/jpeg;base64,",""),
            id_card_side:'front'
        },
        dataType: "json",
        beforeSend: function(request) {
            request.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded');
        },
        success: function(data){
            vm.spinShow = false;
            console.log(data.words_result);
            vm.result = data.words_result;
        },
        error: function(data){
            vm.spinShow = false;
        }
    });
},

这样就可以拿到身份证文字信息

三，图像文字信息识别

先上传，后识别，调用识别接口

fetchInfo1() {
    let vm = this;
    $.ajax({
        type: "POST",
        url: "/rest/2.0/ocr/v1/webimage",
        data: {
            access_token:vm.token,
            image:vm.image1.replace("data:image/jpeg;base64,",""),
        },
        dataType: "json",
        beforeSend: function(request) {
            request.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded');
        },
        success: function(data){
            console.log(data);
            vm.spinShow = false;
            console.log(data.words_result);
            vm.result1 = data.words_result;
        },
        error: function(data){
            vm.spinShow = false;
        }
    });
}