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

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

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

识别出来后

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

<template>
  <view class="uploader-container row wrap">
    <view
      class="upload-image-box"
      v-for="(item, index) in fileList"
      :key="index"
      :style="{ width: previewWidth, height: previewHeight }"
    >
      <image
        mode="widthFix"
        class="img-preview"
        :src="item.url"
        :style="{ width: previewWidth, height: previewHeight }"
      />
      <view
        v-if="deletable"
        class="close-icon row-center"
        @click="deleteImage($event, index)"
      >
        <icon type="cancel" size="30" color="white" />
      </view>
    </view>
    <view
      ref="input"
      class="uplader-upload row-center"
      :style="{ width: previewWidth, height: previewHeight }"
      @click="handleImage"
      v-show="(fileList.length == 0 || mutiple) && fileList.length < maxUpload"
      v-if="!useSlot"
    >
      <image
        mode="widthFix"
        class="img-preview"
        :src="defaultImage"
        :style="{ width: previewWidth, height: previewHeight }"
      />
      <icon v-if="deletable" type="cancel" size="30" color="white" />
      <!-- <view type="image" accept="image/*" class="uploader-input" /> -->
    </view>
    <view
      class="uplader-upload-slot row-center"
      @click="handleImage"
      v-show="(fileList.length == 0 || mutiple) && fileList.length < maxUpload"
      v-else
    >
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "uploader",
  props: {
    fileList: {
      type: Array,
      default: () => [],
    },
    // 默认不允许多选图片
    mutiple: {
      type: Boolean,
      default: false,
    },
    // 限制上传文件数量
    maxUpload: {
      type: Number,
      default: 1,
    },
    previewWidth: {
      type: String,
      default: "",
    },
    previewHeight: {
      type: String,
      default: "",
    },
    previewImage: {
      type: String,
      default: "",
    },
    // 是否可删除
    deletable: {
      type: Boolean,
      default: false,
    },
    // camera
    camera: {
      type: Boolean,
      default: false,
    },
    useSlot: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      defaultImage: null,
      inputId: "",
    };
  },
  create() {},
  mounted() {
    this.defaultImage = this.previewImage;
    this.inputId = "fileid" + "_" + Math.random() * 10;
    var input = document.createElement("input");
    input.id = this.inputId;
    input.type = "file";
    if (this.camera) {
      input.setAttribute("capture", "camera");
    }
    input.style.display = "none";
    input.className = "uploader-input";
    input.accept = "image/*";
    let that = this;
    input.onchange = (event) => {
      let file = document.getElementById(this.inputId);
      let fileName = file.value;
      let files = file.files;
      if (fileName == null || fileName == "") {
      } else {
        if (files[0]) {
          let reader = new FileReader();
          reader.readAsDataURL(files[0]);
          reader.onload = function(e) {
            var data = e.target.result;
            that.defaultImage = data;
            that.$emit("after-read", data);
          };
        }
      }
      // var file = this.file.target.files[0];
      // var reader = new FileReader();
      // reader.readAsDataURL(file);
      // reader.onload = function(e) {
      // 	var data = e.target.result;
      // 	me.imgbase = data;
      // 	console.log('Base64', data);
      // };
    };
    this.$refs.input.$el.appendChild(input);
  },
  methods: {
    handleImage() {
      let file = document.getElementById(this.inputId);
      file.click();
    },
    deleteImage(e, index) {
      this.$emit("delete", index);
    },
  },
};
</script>

<style lang="scss">
.uploader-container {
  .upload-image-box {
    position: relative;
    margin-right: 8rpx;
    margin-bottom: 8rpx;

    .img-preview {
      border-radius: 10rpx;

    }
    .close-icon {
      position: absolute;
      right: -20rpx;
      top: -15rpx;
      width: 40rpx;
      height: 40rpx;
      background-color: red;
      border-radius: 50%;
      z-index: 20;
    }
  }
  .img-preview {
    width: 100%;
  }
  .uplader-upload {
    position: relative;
    // background-color: #f7f8fa;
    cursor: pointer;
    .uploader-input {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      opacity: 0;
      top: 0;
      left: 0;
      z-index: 10;
      cursor: pointer;
    }
  }

  .uplader-upload-slot {
    position: relative;
    min-width: 160rpx;
    min-height: 160rpx;
    .uploader-input {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      opacity: 0;
      top: 0;
      left: 0;
      z-index: 10;
      cursor: pointer;
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215

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

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

1
2

在export default 下面注册

  components: {
    Uploader
  },
1
2
3

开始使用

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

data() {
    return {
      card: {
        url1: "../../static/imgs/idcard1.jpg",
        url2: "../../static/imgs/idcard2.jpg",
      },
    }
  },
1
2
3
4
5
6
7
8

template

<div class="box">
     <Uploader :previewImage="card.url1"/>
</div>
1
2
3

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

把图片转成base64

template

<div class="box">
     <Uploader :previewImage="card.url1" @after-read="chooseImgFront"  class="uploader"/>
  </div>
1
2
3

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

chooseImgFront(e) {
    console.log(e);
 },
1
2
3

调用后端的接口，传入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
		});
	},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

调用接口代码：

 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();
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

数据已经请求过来了

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

最终效果图