百度身份证识别

参考资料：https://blog.csdn.net/przlovecsdn/article/details/80337738
百度人脸识别的关键是要去除图片转成base64代码头部的data:image/png;base64

<template>
  <div class="page pt90">
    <v-header>
      添加就诊人
      <span slot="right" class="color_main3 fs15" @click="sub">确认添加</span>
    </v-header>
    <div class="weui-cells weui-cells_form" style="margin-top:0">
      <div class="pt10 pb10 bg"></div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="form.commpatName" type="text" placeholder="请输入真实姓名">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">身份证号</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="form.commpatIdcard" type="text" placeholder="请输入真实身份证号">
        </div>
      </div>
      <div class="weui-cell" v-if="form.age">
        <div class="weui-cell__hd"><label class="weui-label">年龄</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="form.age" type="text">
        </div>
      </div>
      <div class="weui-cell" v-if="form.sex">
        <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="form.sex" type="text">
        </div>
      </div>
      <div class="pt10 pb10 bg"></div>

      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="form.mobile" type="number" placeholder="请输入手机号">
        </div>
      </div>
      <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd">
          <label class="weui-label">验证码</label>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="form.captcha" type="tel" placeholder="请输入验证码">
        </div>
        <div class="weui-cell__ft">
          <send-code :mobile="form.mobile"
                     @ok="ok"
                     service="smarthos.captcha.commpat.add"
                     style="border-left: 0; font-size: 14px">
          </send-code>
        </div>
      </div>
    </div>

    <div class="center pt72"  @click="handleUpload">
      <v-ava v-if="commpatIdcardUrl" :url="commpatIdcardUrl" :isCircle="false" :delect="true"></v-ava>
      <div v-else >
        <img class="add_pic" src="../../../../src/assets/img/my/addPic.png"/>
        <p class="pt40 fs14 color_666">扫描身份证<span class="color_main3">人像面</span>照片<br/>智能识别信息</p>
      </div>
    </div>

    <v-upload ref="upload" :data="{module:'MEDICAL',fileType:'IMAGE'}"
              :uploadPic="false"
              @success="handleSuccess" @status="status"></v-upload>
  </div>
</template>

<script>
import SendCode from '../../../components/account/send-code'
import Validate from 'ty-light-validate'
import {VUpload} from "../../../components/common";
import VAva from "../../../components/common/v-ava";
import axios from 'axios'
import {getAgeFromIdCard} from "../../../filters/filters";

export default {
  name: 'add',
  data () {
    return {
      form: {
        cid: '',
        commpatName:'',
        commpatIdcard:'',
        mobile: '',
        age:'',
      },
      commpatIdcardUrl: '',//身份证照片
    }
  },
  components: {VAva, SendCode, VUpload },
  methods: {
    getIdcardInfo(){
      axios.post('/baidubce', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    /**
     * 上传照片
     * @param key
     */
    handleUpload(key) {
      this.$refs.upload.start();
    },
    /**
     * 上传照片成功
     * @param data
     */
    handleSuccess(data) {
      this.commpatIdcardUrl = window.URL.createObjectURL(data.file)
      this.getBase64(data.file)
      if (data.response && data.response.attaFileUrl) {
        this.commpatIdcardUrl = data.response.attaFileUrl
      }
    },

    /**
     *将照片压缩成base64
     **/
    getBase64(file){
      let _this = this;
      let image = new Image();
      if(file.type != 'image/png'&&file.type != 'image/jpeg'&&file.type != 'image/gif'){
        bus.$emit('msg', '上传照片格式错误')
        return false;
      }
      image.src = window.URL.createObjectURL(file);
      image.onload = function(){
        // 默认按比例压缩
        let w = image.width,
          h = image.height,
          scale = w / h;
        w = 1024;
        h = w / scale;
        // 默认图片质量为0.7，quality值越小，所绘制出的图像越模糊
        let quality = 0.7;
        //生成canvas
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        // 创建属性节点
        let anw = document.createAttribute("width");
        anw.nodeValue = w;
        let anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(image, 0, 0, w, h);
        let ext = image.src.substring(image.src.lastIndexOf(".")+1).toLowerCase();//图片格式
        let base64 = canvas.toDataURL("image/"+ext ); //可选参数 quality
        _this.idcardorc(base64)
      }

    },

    /**
     *百度-身份证识别
     **/
    async idcardorc(base64){
      let code64 = base64.replace('data:image/png;base64,', '')
      let {code, obj, msg} = await this.$http('smarthos.system.baidu.idcardorc',{
        imageBase64: code64
      })
      if (code === '0'){
        obj = JSON.parse(obj)
        let info = obj.words_result
        if (!info['姓名'].words){
          bus.$emit('msg', '请上传正确的图片')
        }
        this.form.commpatName= info['姓名'].words
        this.form.commpatIdcard= info['公民身份号码'].words
        this.form.sex= info['性别'].words
        this.form.age= info['公民身份号码'].words? getAgeFromIdCard(info['公民身份号码'].words) : ''
      }else {
        bus.$emit('msg', msg)
      }
    },
    /**
     * 照片上传中 展示loading
     * @param val
     **/
    status(val) {
      switch (val) {
        case 'started':
          bus.$emit('loading', true)
          break;
        case 'ended':
          bus.$emit('loading', false)
      }
    },

    ok (data) {
      this.$set(this.form, 'cid', data.cid)
      if (data.value) {
        this.$set(this.form, 'captcha', data.value)
      }
    },
    async sub () {
      let { form } = this
      const Validater = new Validate()

      Validater.add(form.commpatName, [
        { type: 'required', error: '姓名不能为空' }
      ])

      Validater.add(form.commpatIdcard, [
        { type: 'required', error: '身份证不能为空' }
      ])

      Validater.add(form.mobile, [
        { type: 'required', error: '手机号不能为空' },
        { type: 'isMobile', error: '手机号格式不正确' }
      ])

      Validater.add(form.captcha, [
        { type: 'required', error: '验证码不能为空' }
      ])

      Validater.add(form.cid, [{ type: 'required', error: '验证码不能为空' }])

      let error = Validater.run()
      if (error) {
        bus.$emit('msg', error)
        return false
      }
      let { code: ok } = await this.$http('smarthos.captcha.check', form)
      if (ok != 0) {
        bus.$emit('msg', '验证码验证失败')
        return false
      }
      let { code, msg } = await this.$http(
        'smarthos.user.commpat.add',
        this.form
      )
      code != 0 && bus.$emit('msg', msg)
      if (code == 0) {
        this.$router.back()
      }
    }
  },
  beforeDestroy() {
    if (this.gallery) {
      this.gallery.hide()
      this.gallery = null;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../style/public";
  .add__btn {
    @include h_lh(90px);
    margin-top: 180px;
  }
  .weui-input{
    text-align: right;
  }

  .add_pic{
    width: 400px;
    height: 232px;
  }

  .ava {
    display: block;
    width: 400px;
    height: 230px;
    margin: 0 auto;
  }

  input::-webkit-input-placeholder{ /*WebKit browsers*/
    color: #CCCCCC;
    text-align: left;

  }

  input::-ms-input-placeholder{ /*Internet Explorer*/
    color: #CCCCCC;
    text-align: left;
  }
</style>