vue 百度ocr识别身份证(银行卡、火车票、名片、发票等同理)信息

1、获得access_token(可以前端向百度发送请求获取,也可以后端获取,传token给前端,建议后端获取),本文默认前端已获得access_token。
2、调用摄像头或本地文件夹获得证件照片
3、将证件照片转化为base64格式
4、发送请求,反写证件信息到输入框

本文实现项目效果如下:仅以获得证件号码为例,其他同理,点击 红色框 中图标即可调用 摄像头 或打开 本地文件夹
vue 百度ocr识别身份证(银行卡、火车票、名片、发票等同理)信息_第1张图片
HTTP 方法:POST
请求URL: https://aip.baidubce.com/rest/2.0/ocr/v1/idcard
具体参见百度API文档:https://ai.baidu.com/docs#/OCR-API/top

代码如下:

  

证件号码

  test(event){
      let file = event.target.files[0];
      let data = new FileReader();
      let img = new Image();
      let formatdata = "";
      data.onload = e1 => {
          img.onload = e => {
              if (/^image\/([a-zA-Z]|\*)+$/.test(file.type)) {
                  formatdata = this.scaleimg(e);//返回base64图片数据
                  formatdata = encodeURIComponent(formatdata);
                  //id_card_info 代表请求地址,根据自己修改
                  this.$http.post("id_card_info", {'access_token':this.access_token,'image':formatdata,'id_card_side':this.id_card_side}).then(res => {
                  		this.idNo = res.data.words_result.公民身份号码.words;
                  })
              }
          };
          img.src = e1.target.result;
      };
      data.readAsDataURL(file);
  }

参考:https://www.jianshu.com/p/36f4f456d1c7

转载请注明出处,谢谢!

你可能感兴趣的:(vue_ocr,前端)