越来越多的小程序需要上传身份证并做出图像限制,需要人像面和国徽面放置指定框内,并进行OCR识别拿到准确的身份信息。以免出错!
OCR识别下一篇再介绍,本文只做图像限制,没有做组件而是跳转页面实现
frameLimit页面-->upload页面
废话不多说,看效果
wx.png wx.jpeg
frameLimit.index
<!-- 上传身份证图框限制 -->
<view class="index">
<view class="frameLimit">
<image class="cardimg" data-index="0" bindtap="getbox" src="{{frontphoto}}"></image>
<image class="cardimg" data-index="1" bindtap="getbox" src="{{backphotos}}"></image>
<view class="box" wx:if="{{boxshow}}">
<view class="black" bindtap="hidebox"></view>
<view class="nr">
<view class="btn" bindtap="album">从相册中选择</view>
<view class="btn" bindtap="photograph">拍照</view>
<view class="line"></view>
<view class="btn" bindtap="hidebox">取消</view>
</view>
</view>
</view>
</view>
frameLimit.js
记得清除缓存图片
// 拍照 跳转
photograph() {
wx.navigateTo({
url: '/pages/upload/upload?num=' + this.data.num
})
},
onShow: function () {
if(wx.getStorageSync('frontimg')){
this.setData({
frontphoto: wx.getStorageSync('frontimg'),
})
}
if(wx.getStorageSync('backimg')){
this.setData({
backphotos: wx.getStorageSync('backimg'),
})
}
},
})
frameLimit页面没有上传完整代码需要的话,评论区留言,在后期会上传至github。 页面上所有图片ui提供
下面upload页面(主要页面)
upload.index
<view class="upload">
<camera device-position="back" mode="normal" class="camera">
<view class="box">
<!-- 人像面 -->
<view wx:if='{{num == 0}}' class="front">
<view class="front_left">
<view class="title">请将身份证人像面放置框内,并调整好光线</view>
<view class="front_left_boxs">
<image class="idcardimg" src="../img/img_scan_idcard@2x.png">
</image>
<view class="front_left_head">
<image class="portraitimg" src="../img/icon_portrait@2x.png"></image>
</view>
</view>
</view>
<view class="front_right">
<image bindtap="takePhoto" class="photographimg" src="../img/btn_photograph@2x.png"></image>
</view>
</view>
<!-- 国徽面 -->
<view wx:if='{{num == 1}}' class="front">
<view class="front_left">
<view class="title">请将身份证国徽面放置框内,并调整好光线</view>
<view class="front_left_boxs">
<image class="idcardimg" src="../img/img_scan_idcardtwo@2x.png">
</image>
<view class="front_left_head">
<image class="portraitimg" src="../img/icon_portraittwo@2x.png"></image>
</view>
</view>
</view>
<view class="front_right">
<image bindtap="takePhoto" class="photographimg" src="../img/btn_photograph@2x.png"></image>
</view>
</view>
</view>
</camera>
</view>
upload.css
.upload{
width: 100vw;
height: 100vh;
position: relative;
z-index: 100;
overflow: hidden;
}
.camera {
width: 100vw;
height: 100vh;
z-index: 200;
}
.box{
width: 100vw;
height: 100vh;
z-index: 300;
background: rgba(0, 0, 0, 0.1);
display: flex;
position: absolute;
left: 0;
top: 0;
}
.front{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.front_left{
width: 80%;
height: 90%;
}
.title{
width: 500px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 12px;
text-align: center;
margin-bottom: 10px;
}
.front_left_boxs{
width: 500px;
height: 305px;
position: relative;
}
.idcardimg{
width: 500px;
height: 305px;
}
.front_left_head{
width: 479px;
height: 290px;
position: absolute;
left: 0;
right: 0;
margin: auto auto;
top: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
}
.portraitimg{
width: 155px;
height: 175px;
float: right;
margin-top: 48px;
margin-right: 24px;
}
.front_right{
width: 10%;
height: 90%;
display: flex;
align-items: center;
}
.photographimg{
width: 65px;
height: 65px;
}
upload.js
Page({
data: {
num: '',
src: '',
},
takePhoto() {
const that = this;
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
that.setData({
src: res.tempImagePath
})
if(this.data.num == 0){
wx.setStorageSync('frontimg', res.tempImagePath)
}else{
wx.setStorageSync('backimg', res.tempImagePath)
}
wx.navigateBack({
delta: 1
})
},
fail: (err) => {
console.log(err)
wx.showToast({
title: '拍照失败,请重试!',
icon: 'none'
})
}
})
},
onLoad: function (options) {
if(options.num){
this.setData({
num:options.num
})
}
},
})
upload.json
"pageOrientation": "landscape", // 横屏
"navigationStyle": "custom" // 全屏展示
基本上如此,有任何疑问欢迎留言并分享。
网友评论