Vue-Uni-App小程序实现身份证识别

Vue-Uni-App小程序实现身份证识别~

需求：实现一个身份证的识别功能！看下方图片！
思路：（把用户上传的身份证图片转成base64请求接口发送给后端，后端返回对应的信息渲染到页面上就行了！）

识别出来后

第一步：在components新建 image-uploader.vue 代码如下：

第二步：在你需要的页面注册组件：代码如下

import Uploader from "@/components/image-uploader.vue";

在export default 下面注册

  components: {
    Uploader
  },

开始使用

data card{}里面是放的背景图片！

data() {
    return {
      card: {
        url1: "../../static/imgs/idcard1.jpg",
        url2: "../../static/imgs/idcard2.jpg",
      },
    }
  },

template

效果如下
可以看见背景图片已经出来了！用户点击也可以选择图片了！

把图片转成base64

template

图片已经转成了base64的转码，这打印base64到控制台!

chooseImgFront(e) {
    console.log(e);
 },

调用后端的接口，传入base64，根据你们的需求来，接口不是活的

import request from './http'

export default {
	// 身份证正面识别接口
	getIDCardFrontInfo(data) {
		return request({
		  url: `blade-lhyg/user/user_staff/identity/frontBase64`,
			method: 'POST',
			data
		});
	},
	// 身份证正面识别接口
	getIDCardReverseInfo(data) {
		return request({
		  url: `blade-lhyg/user/user_staff/identity/contraryBase64`,
			method: 'POST',
			data
		});
	},
	// 身份认证
	authentication(data) {
		return request({
		  url: `blade-lhyg/user/user_staff/identity/authentication`,
			method: 'POST',
			data
		});
	},
}

调用接口代码：

 async chooseImgFront(e) {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });

      try {
        const { code, data } = await this.$api.certify.getIDCardFrontInfo({
          phoneNo: this.$store.getters.phoneNo,
          photo: e,
        });
        if (code === 200) {
          Object.assign(this.form, data);
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
      }
    },

数据已经请求过来了

接下来就是数据渲染，数据渲染就不写了太简单了，就是把数据保存到list[]里面然后{{}}就行了！

最终效果图