微信小程序 上传身份证图像限制

越来越多的小程序需要上传身份证并做出图像限制，需要人像面和国徽面放置指定框内，并进行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"     // 全屏展示

基本上如此，有任何疑问欢迎留言并分享。