UniAPP小程序扫描身份证读取数据

<template>
  <view class="cameraBg">
    <camera device-position="back" flash="auto" style="width: 100%; height: 100vh">
      <cover-image src="https://baida-public.oss-cn-hangzhou.aliyuncs.com/fy_health/idcard/idCard.png" class="scan-img">
      </cover-image>
      <cover-view class="scanBtn" v-if="scanShow">
        <cover-view class="beat" @click="scan">
          <cover-image class="beatImg" src="@/static/album.png"></cover-image>
          <cover-view> 相册 </cover-view>
        </cover-view>
        <cover-view class="album" @click="takePhoto">
          <cover-image class="albumImg" src="@/static/beat.png"></cover-image>
          <cover-view> 拍照 </cover-view>
        </cover-view>
        <cover-view class="tips">
          <cover-view> 请将身份证置于取景框内 </cover-view>
        </cover-view>
      </cover-view>

    </camera>
  </view>
</template>

<script>
  import {uploadIdCard} from "@/config/api"
  export default {
    data() {
      return {
        scanShow: true
      }
    },
    methods: {
      // 相册
      scan() {
        // 选择图片
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album'],
          success: (res) => {
            this.compress(res.tempFilePaths[0])
          }
        })
      },
      // 启动图片压缩
      compress(tempFilePaths) {
        const vm = this
        vm.scanShow = false
        uni.showLoading({
          title: '智能识别中...'
        })
        uni.compressImage({
          src: tempFilePaths,
          quality: 80,
          success: (imageRes) => {
            // 获取类型
            uni.getImageInfo({
              src: imageRes.tempFilePath,
              success(imageInfo) {
                // 转base64
                uni.getFileSystemManager().readFile({
                  filePath: imageRes.tempFilePath,
                  encoding: 'base64',
                  success: (base) => {
                    // 返回base64格式 'data:image/' + imageInfo.type + ';base64,' + 
                    const base64Str = base.data
                    vm.camera64(base64Str)
                  },
                  fail: (err) => {
                    console.log(err)
                  }
                })
              }
            })
          }
        })
      },
      // 拿到图片开始进行识别
      camera64(base64Str) {
        this.scanShow = true
        console.log(base64Str, 'base64Str图片')
        // 后端接口
        uploadIdCard({idCardImg:base64Str}).then(res=>{
          console.log(res)
          uni.hideLoading()
          var pages = getCurrentPages();
          var prevPage = pages[pages.length-2]
          prevPage.setData({
            mdata:1
          })
          var obj = {
            name: res.result.name,
            address: res.result.address,
            idCard: res.result.idNumber
          }
          prevPage.onShow(obj)
          uni.navigateBack()
        }).catch(err=>{
          this.$u.toast(err.message)
        })
        
      },
      // 拍照
      takePhoto() {
        const ctx = uni.createCameraContext()
        ctx.takePhoto({
          quality: 'high',
          success: (res) => {
            this.compress(res.tempImagePath)
          }
        })
      },
      error(e) {
        console.log(e.detail)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cameraBg {
    width: 100%;
    height: 100vh;
    position: fixed;
    .tips{
      position: fixed;
      bottom: 400rpx;
      font-size: 24rpx;
      text-align: center;
      color: #fff;
    }
    .scan-img {
      width: 100%;
      height: 1624rpx;
      z-index: 1;
      opacity: 0.5;
    }

    .scanBtn {
      width: 100%;
      z-index: 99999;
      position: fixed;
      bottom: 100rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .beat {
        position: absolute;
        bottom: 0rpx;
        left: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        font-weight: 400;
        color: #ffffff;

        .beatImg {
          width: 88rpx;
          height: 88rpx;
          margin-bottom: 30rpx;
        }
      }

      .album {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        font-weight: 400;
        color: #ffffff;

        .albumImg {
          width: 120rpx;
          height: 120rpx;
          margin-bottom: 30rpx;
        }
      }
    }
  }
</style>