|
身份证上传识别的流程： 1、手机拍照 2、将照片上传给服务器，服务器调用阿里云或者百度的ocr身份证识别接口 这里只讲述如何用h5拍照，并将图片转换成base64，上传。
拍照压缩转base64主要看这几个方法：upload 、imgPreview 、startParse、rotateImg 、compress方法
拍摄/上传客户二代身份证
开始识别
请确认身份证信息(双击内容可修改):
姓名
{{auth.name}}
身份证
{{auth.num}}
确认并返回
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
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
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
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'])
}
}
*{
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;
}
}
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;
}
|