H5身份证上传识别功能

身份证上传识别的流程：
1、手机拍照
2、将照片上传给服务器，服务器调用阿里云或者百度的ocr身份证识别接口
这里只讲述如何用h5拍照，并将图片转换成base64，上传。

拍照压缩转base64主要看这几个方法：upload 、imgPreview 、startParse、rotateImg 、compress方法

<template>
  <div class="bg-fff" style="min-height:100%;">
   <div class="p-15">
    <div class="return-icon" @click="back"><i class="iconfont icon-houtui f16"></i></div>
    <div class="center f14 c-333"> 拍摄/上传客户二代身份证</div>
       <div class="img-control mt-20"  v-if="headerImage">
         <div class="img-control-tool" @click="handleDelete"><i class="iconfont icon-shanchu c-666 f22"></i></div>
          <div class="img-container">
                <img :src="headerImage" alt="" class="picture">
              <!-- <div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div> -->
            </div>
            <div class="img-control-tool" @click="showMagnifyIdCard=true"><i class="iconfont icon-fangda c-666 f22"></i></div>
       </div>
 
      <div style="margin-top:20px;">
            <div class="beautify-upload  center" v-if="!headerImage">
                   <input type="file" id="upload"  ref="uploadInput" accept="image/*" capture="camera"   @change="upload" v-if="android">
                   <input type="file" id="upload"  ref="uploadInput" accept="image/*"   @change="upload" v-else>
            </div>
            <div class="mul-area" v-if="headerImage&&!hasServerMsg" >
                 <button @click="startParse" class="blue-btn mul-btn">开始识别</button>
            </div>
      </div>
      <div class="confirm-msg" v-if="hasServerMsg">
         <h3 style="margin-bottom:10px;" class="f14">请确认身份证信息(双击内容可修改):</h3>
          <div class="row">
             <div class="sort">姓名</div>
             <div class="content" contenteditable="true">{{auth.name}}</div>
          </div>
           <div class="row">
             <div class="sort">身份证</div>
             <div class="content" contenteditable="true">{{auth.num}}</div>
          </div>
          <div><button class="confirm-btn" @click="confirm">确认并返回</button></div>
      </div>
      <div class="id-card-magnify" v-show="showMagnifyIdCard" @click="showMagnifyIdCard=false">
            <div class="close" @click="showMagnifyIdCard=false"><i class="iconfont icon-guanbi f35"></i></div>
            <img :src="headerImage" alt="" class="magnify-picture">
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/service/microInsurance'
import * as util from '@/scripts/util'
import {mapState} from 'vuex'

 /* eslint-disable */
export default {
   data () {
     return {
       headerImage: '',
       picValue: '',
       showMagnifyIdCard:false,
       hasServerMsg:false,
       auth:{},
       android:util.browser.versions.android
     }
   },
   mounted () {
   },
   methods: {
     back(){
        this.$emit('close')
        this.clearData()
     },
     confirm(){
        this.$emit('confirm',{...this.auth})
        this.clearData()
     },
     clearData(){
         this.headerImage=''
         this.picValue =''
         this.showMagnifyIdCard = false
         this.hasServerMsg =false
         this.auth ={}
     },
     upload (e) {
       let files = e.target.files || e.dataTransfer.files
       if (!files.length) return
       this.picValue = files[0]
       this.imgPreview(this.picValue)
       console.log(this.picValue)
     },
     imgPreview (file) {
       let self = this
       let Orientation
      // 去获取拍照时的信息，解决拍出来的照片旋转问题
       EXIF.getData(file, function () {
         Orientation = EXIF.getTag(this, 'Orientation')
       })
      // 看支持不支持FileReader
       if (!file || !window.FileReader) return
       if (/^image/.test(file.type)) {
          // 创建一个reader
         let reader = new FileReader()
          // 将图片2将转成 base64 格式
         reader.readAsDataURL(file)
          // 读取成功后的回调
         reader.onloadend = function () {
           let result = this.result
           let img = new Image()
           img.src = result
          //  判断图片是否大于100K,是就直接上传，反之压缩图片
           if (this.result.length <= (100 * 1024)) {
             self.headerImage = this.result
          
           } else {
             img.onload = function () {
               let data = self.compress(img, Orientation)
               self.headerImage = data
             }
           }
         }
       }
     },
     startParse(){
      this.postImg()
     },
     postImg () {
       let base64 =''
       let index =  this.headerImage.indexOf(',')
       if(index!==-1){
        base64 = this.headerImage.substring(index+1)
       }
       if(base64){
         // 这里写接口
        api.orcIdcard({
          authorization:this.authorization,
          openId:this.openId,
          base64:base64
        }).then(util.filterBackendData).then(res=>{
            this.hasServerMsg=true
            this.auth =res
        }).catch(err=>{
          this.showToast(err)
        })
       }
     
     },
     rotateImg (img, direction, canvas) {
        // 最小与最大旋转方向，图片旋转4次后回到原方向
       const minStep = 0
       const maxStep = 3
       if (img == null) return
        // img的高度和宽度不能在img元素隐藏后获取，否则会出错
       let height = img.height
       let width = img.width
       let step = 2
       if (step == null) {
         step = minStep
       }
       if (direction === 'right') {
         step++
            // 旋转到原位置，即超过最大值
         step > maxStep && (step = minStep)
       } else {
         step--
         step < minStep && (step = maxStep)
       }
        // 旋转角度以弧度值为参数
       let degree = step * 90 * Math.PI / 180
       let ctx = canvas.getContext('2d')
       switch (step) {
         case 0:
           canvas.width = width
           canvas.height = height
           ctx.drawImage(img, 0, 0)
           break
         case 1:
           canvas.width = height
           canvas.height = width
           ctx.rotate(degree)
           ctx.drawImage(img, 0, -height)
           break
         case 2:
           canvas.width = width
           canvas.height = height
           ctx.rotate(degree)
           ctx.drawImage(img, -width, -height)
           break
         case 3:
           canvas.width = height
           canvas.height = width
           ctx.rotate(degree)
           ctx.drawImage(img, -width, 0)
           break
       }
     },
     compress (img, Orientation) {
       let canvas = document.createElement('canvas')
       let ctx = canvas.getContext('2d')
        // 瓦片canvas
       let tCanvas = document.createElement('canvas')
       let tctx = tCanvas.getContext('2d')
       let initSize = img.src.length
       let width = img.width
       let height = img.height
      // 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
       let ratio
       if ((ratio = width * height / 4000000) > 1) {
         console.log('大于400万像素')
         ratio = Math.sqrt(ratio)
         width = width/ratio
         height = height/ratio
       } else {
         ratio = 1
       }
       canvas.width = width
       canvas.height = height
  //        铺底色
       ctx.fillStyle = '#fff'
       ctx.fillRect(0, 0, canvas.width, canvas.height)
      // 如果图片像素大于100万则使用瓦片绘制
       let count
       if ((count = width * height / 1000000) > 1) {
         console.log('超过100W像素')
         count = ~~(Math.sqrt(count) + 1) // 计算要分成多少块瓦片
  //            计算每块瓦片的宽和高
         let nw = ~~(width / count)
         let nh = ~~(height / count)
         tCanvas.width = nw
         tCanvas.height = nh
         for (let i = 0; i < count; i++) {
           for (let j = 0; j < count; j++) {
             tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh)
             ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
           }
         }
       } else {
         ctx.drawImage(img, 0, 0, width, height)
       }
      // 修复ios上传图片的时候 被旋转的问题
       if (Orientation !== '' && Orientation !== 1) {
         switch (Orientation) {
           case 6:// 需要顺时针（向左）90度旋转
             this.rotateImg(img, 'left', canvas)
             break
           case 8:// 需要逆时针（向右）90度旋转
             this.rotateImg(img, 'right', canvas)
             break
           case 3:// 需要180度旋转
             this.rotateImg(img, 'right', canvas)// 转两次
             this.rotateImg(img, 'right', canvas)
             break
         }
       }
      // 进行最小压缩
       let ndata = canvas.toDataURL('image/jpeg', 0.1)
       console.log('压缩前：' + initSize)
       console.log('压缩后：' + ndata.length)
       console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + '%')
       tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0
       return ndata
     },
     handleDelete(){
       this.headerImage='';
       this.deleteServerMsg()
     },
     deleteServerMsg(){
        this.hasServerMsg=false;
     }
   },
   computed:{
       ...mapState(['authorization','openId'])
   }
}
</script>

<style lang="less">
*{
  margin: 0;
  padding: 0;
}
.return-icon{
  position:absolute;
  top:10px;
  left:10px;
  color:#666;
  // color:#1E88C7;
  // background:#fff;
  // border:2px solid #eee;
  // border-radius: 50%;
  width:80px;
  height:80px;
  line-height:80px;
  text-align: center;
}
.img-control{
  display: flex;
  align-items:center;
}
.img-control-tool{
   flex:1;
   text-align: center;
}
.img-container{
  overflow: hidden;
  position: relative;
  width:60%;
  margin:0 auto;
  /* height:600px; */
  border: 1px solid #d5d5d5;
}
.picture {
  width: 100%;
  height:300px;
  vertical-align: middle;
  /* overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; */
}
.beautify-upload{
    position: relative;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    background: url('./img/upload-idcard.png') no-repeat;
    width:250PX;
    height:150PX;
    margin:0 auto;
    background-size:100% 100%; 
}
.beautify-upload input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    left:0;
    bottom:0;
    opacity: 0;
}
.mul-area{
  display: flex;
}
.mul-area>button{
  flex:1;
}
.mul-btn{
  height:88px;
  line-height:88px;
  border-radius: 8px ;
}
.blue-btn{
    display: block;
    background:#0099ff;
    border: 1px solid #0099ff;
    color:#fff;
}
.id-card-magnify{
  width:100%;
  background:rgba(0,0,0,.8);
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  display: flex;
  align-items: center;
}
.magnify-picture{
  width:100%;
  height:auto;
}
.close{
  position: absolute;
  right:10px;
  top:10px;
  width:100px;
  height:100px;
  text-align: center;
  color:#fff;
}
.confirm-msg{
  font-size:14PX;
  margin-top:20px;
  padding:30px 20px;
  // background: #fff;
  color:#454545;
  .row{
    display: flex;
    border:2px solid #e6e6e6;
    margin-bottom:-1px;
    .sort{
      padding:10px;
      flex-basis: 120px;
      border-right:2px solid #e6e6e6;
      text-align: center
    }
    .content{
      flex:1;
      padding:10px;
      text-align: center;
    }
  }
  .confirm-btn{
    padding:20px;
    background:#0099ff;
    color:#fff;
    width:100%;
    font-size:15PX;
    margin-top:40px;
    border-radius: 8px;
  }
}


</style>

common.less文件：

body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption, {
    padding: 0;
    margin: 0;
    list-style: none;
    font-style: normal;
    text-decoration: none;
    border: none;
    font-weight: normal;
    font-family: -apple-system-font,Helvetica Neue,sans-serif;
    box-sizing: border-box;
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing: antialiased;
    &:hover{
        outline: none;
    }
    
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width: 0px;
    height: 0px;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
    border-radius: 10px;
    background-color: #F8F8F8;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

input[type="button"], input[type="submit"], input[type="search"], input[type="reset"] {
    -webkit-appearance: none;
}

textarea { -webkit-appearance: none;}

html,body{
    height: 100%;
    width: 100%;
}

.clear:after{
    content: '';
    display: block;
    clear: both;
}

.clear{
    zoom:1;
}
button{
    outline:none;
}
.back_img{
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.margin{
    margin: 0 auto;
}

.left{
    float: left;
}

.right{
    float: right;
}
.center{
    text-align: center;
}
.hide{
    display: none;
}
.show{
    display: block;
}
.text-right{
    text-align: right;
}
.f12{
    font-size:12px;
}
.f14{
  font-size:14px;
}
.f15{
    font-size:15px;
}
.f16{
    font-size:16px;
}
.f20{
    font-size:20px;
}
.f22{
    font-size:22px;
}
.f16{
  font-size:16px;
}
.f35{
    font-size:35px;
}
.f37{
    font-size:37px;
}
ul,li{
  list-style:none
}
.mt-5{
  margin-top:5px;
}
.mt-10{
  margin-top:10px;
}
.mt-20{
    margin-top:20px;
}
.ml-5{
    margin-left:5px;
}
.ml-10{
    margin-left:10px;
}
.ml-20{
    margin-left:20px;
}
.mr-10{
    margin-right:10px;
}
.pt-10{
    padding-top:10px;
}
.p-15{
    padding:15px;
}
.p-10{
    padding:10px;
}
.bold{
    font-weight: bold;
}
.bg-fff{
    background:#fff;
}
.is-danger{
 color:red;
}
.vertical-md{
    vertical-align: middle;
}
a:hover, a:visited, a:link, a:active,a {
    text-decoration: none;
    color: #444;
}
.c-333{
    color:#333;
}
.c-666{
    color:#666;
}
.c-999{
    color:#999;
}
.c-purple{
    color:#f171ae;
}
.txt-ellipsis{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}