美文网首页微信小程序
微信小程序 上传身份证图像限制

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

作者: AAA_si | 来源:发表于2022-03-28 15:08 被阅读0次

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

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

    相关文章

      网友评论

        本文标题:微信小程序 上传身份证图像限制

        本文链接:https://www.haomeiwen.com/subject/mngrjrtx.html