uniapp调用百度智能云身份证识别

第一步：注册登录百度智能云平台https://login.bce.baidu.com/

第二步：选择产品服务-人工智能-文字识别-创建应用

第三步：获取应用的API Key 和Secret Key

代码逻辑

新建js_sdk文件夹新建baidu_OCR.js

// 获取token
function token() {
	return new Promise((rs, rj) => {
		console.log('准备访问接口获取OCR识别token')
		try {
		    var res = uni.getStorageSync('BDOCRToken');
		    if (res) {
		        console.log(res);
				var startTime=res.time;
				var token=res.token;
				var endTime=new Date().getTime();
				var diff=(endTime - startTime) / (1000 * 60 * 60 * 24)//一天的时间数
				if(diff<30) return rs(token);
		    }
		} catch (e) {// error
		    console.log(e);
		}
		uni.request({
			//此url为专门插件测试预览用的key和secret key， 请替换为自己申请的key
			url: 'https://aip.baidubce.com/oauth/2.0/token',
			method: 'POST', 
			data: {
				grant_type:'client_credentials',
				client_id:'你的API Key',
				client_secret:'你的Secret Key'
			},
			header: {
				"content-type": "application/x-www-form-urlencoded"
			},
			success: (res) => {
				console.log('访问成功');
				if(res&&res.data&&res.data.access_token) {
					uni.setStorageSync('BDOCRToken', {time:new Date().getTime(),token:res.data.access_token});
					rs(res.data.access_token);
				}
				else rj(false)
			},
			fail: (err) => {
				console.log('访问失败');
				rj(false);
			}
		});
	})
}

// 身份证识别接口
function idcard(obj,succ,fail){
	uni.request({ 
		url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard',
		method: 'POST', 
		data:{ 
			image:obj.b64, // 身份证照片
			id_card_side: obj.side,//front-正面|back-背面
			access_token: obj.token
		},
		header: {
			"content-type": "application/x-www-form-urlencoded"
		},
		success: (res) => {
			console.log('访问成功:',res);
			 if(res.statusCode==200) {
				var result={}
				if(res.data&&res.data.words_result) {
					for(var key in res.data.words_result) {
						result[key]=res.data.words_result[key].words
					}
					 console.log('result:',result)
					 return succ(result)
				}
			 }
			 uni.showToast({icon:'none',title:'证件识别OCR返回数据有误！'})
			 fail(false)
		},
		fail: (err) => {
			console.log('访问失败:',err);
			uni.showToast({icon:'none',title:'证件识别OCR调用失败！'})
			fail(false);
		}
	});
}

function ocr(obj){
	console.log('ocr.func:',obj.func)
	return new Promise(async (rs, rj) => {
		if(!obj.token) obj.token=await token()
		if(obj.func) return this[obj.func](obj,rs,rj);
	});
};

export default {
	ocr: ocr,
	token: token,
	idcard: idcard
};

页面调用index.vue

<template>
  <view>
    <!-- 身份证识别 -->
    <h2>身份证识别</h2>
    <view class="uploadBox_card">
      <view style="width: 70%; margin-bottom: 10px" @click="uploadIdcard(1)">
        <view v-if="!idCarSrc1" class="uploadItem">
          <view class="imgBox">
            <view class="tit">身份证正面</view>
            <view class="leftTop"></view>
            <view class="leftTop2"></view>
            <view class="leftbottom"></view>
            <view class="leftbottom2"></view>
            <view class="rightTop"></view>
            <view class="rightTop2"></view>
            <view class="rightbottom"></view>
            <view class="rightbottom2"></view>
          </view>
        </view>
        <image
          v-if="idCarSrc1"
          class="imgUrl"
          :src="idCarSrc1"
          mode="widthFix"
        />
      </view>
      <view style="width: 70%" @click="uploadIdcard(2)">
        <view v-if="!idCarSrc2" class="uploadItem">
          <view class="imgBox">
            <view class="tit">身份证反面</view>
            <view class="leftTop"></view>
            <view class="leftTop2"></view>
            <view class="leftbottom"></view>
            <view class="leftbottom2"></view>
            <view class="rightTop"></view>
            <view class="rightTop2"></view>
            <view class="rightbottom"></view>
            <view class="rightbottom2"></view>
          </view>
        </view>
        <image
          v-if="idCarSrc2"
          class="imgUrl"
          :src="idCarSrc2"
          mode="widthFix"
        />
      </view>
      <view @click="identityCard()" class="leftBtn">身份证检测</view>
    </view>
  </view>
</template>

<script>
import OCR from "js_sdk/BaiDu-OCR";
export default {
  data() {
    return {
      idCarSrc1: "", // 身份证正面
      idCarSrc2: "", // 身份证反面
      idCard_img_z: "", // 身份证正面
      idCard_img_f: "", // 身份证反面
      cardNum: 0, // 身份证正1反2面
    };
  },
  methods: {
        // 图片转base64
    urlTobase64(url, item) {
      var itemname = item.name.split(".")[0];
      var itemtype = item.name.split(".")[1];
      var base64 = "";
      uni.request({
        url: url,
        method: "GET",
        responseType: "arraybuffer",
        success: (res) => {
          base64 = uni.arrayBufferToBase64(res.data); // 把arraybuffer转成base64
          var img = {
            name: itemname,
            size: item.size,
            type: itemtype,
            content: base64,
            url: url,
            new: true,
            state: -1,
          };
          if (this.cardNum === 1) {
                        this.idCard_img_z = img.content;
                        this.cardNum = 0;
                    } else if (this.cardNum === 2) {
                        this.idCard_img_f = img.content;
                        this.cardNum = 0;
                    }
        },
      });
    },
    // 身份证检测
    uploadIdcard(num) {
      // num=1 正面 num=2 反面
      this.cardNum = num;
      uni.chooseImage({
        count: 1,
        sizeType: ["original"],
        sourceType: ["camera", "album"], //拍照或相册
        success: (res) => {
          if (num === 1) {
            this.idCarSrc1 = res.tempFilePaths[0];
          } else if (num === 2) {
            this.idCarSrc2 = res.tempFilePaths[0];
          }
          res.tempFiles.forEach((item, index) => {
            this.urlTobase64(res.tempFilePaths[index], item);
          });
        },
      });
    },
        // 身份证识别
    async identityCard() {
      var result1 = await OCR.ocr({
        func: "idcard",
        side: "front",
        b64: this.idCard_img_z,
      });
      var result2 = await OCR.ocr({
        func: "idcard",
        side: "back",
        b64: this.idCard_img_f,
      });
      console.log(result1);
      console.log(result2);
    }
  },
};
</script>

<style lang="scss" scoped>
.uploadBox_card {
  padding: 15rpx 20rpx 40rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .uploadItem {
    width: 100%;
    height: 320rpx;
    background-color: #f1f7ff;
    border-radius: 15rpx;
    padding: 30rpx;
    position: relative;
  }
  .imgUrl {
    width: 100%;
    height: 320rpx;
  }
  .leftBtn {
    width: 70%;
    height: 75rpx;
    line-height: 75rpx;
    background-color: #007aec;
    border-radius: 0 0 12rpx 12rpx;
    text-align: center;
    color: #fff;
  }
  .imgBox {
    width: 100%;
    height: 100%;
    position: relative;
    .tit {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .leftTop {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      left: 0;
    }

    .leftTop2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      top: 0;
    }

    .leftbottom {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      bottom: 0;
    }

    .leftbottom2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      bottom: 0;
    }

    .rightTop {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
    }

    .rightTop2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
      top: 0;
    }

    .rightbottom {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .rightbottom2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>