小程序上传身份证 图框限制

很多时候我们项目中都需要到身份证,然后上传的时候ui给出了一个红框限制  说最好提示用户把身份证按照红框对齐拍照,以免信息不准,然后就去了小程序组件,也没有找到,然后去社区  也看了各种各样的,最后自己算了搞了搞 效果也出来了,有需要的可以看一下.

首先我是做成了组件的形式,页面中只需要引入组件   使用就ok了  话不多说  上代码:

首先是我们的组件页面 

<view class="camera_box">
  <camera class="camera" wx:if="{{!show}}" device-position="back" flash="off" binderror="error">
    <view class="id_m">
      <image class="img" wx:if='{{Num == 0}}' src="https://img-blog.csdnimg.cn/20210126144225906.png">
      </image>
      <image class="img" wx:if='{{Num == 1}}' src="https://img-blog.csdnimg.cn/20210126144317636.png">
      </image>
    </view>
  </camera>
  <image class="camera_img" src="{{src}}" wx:if="{{show}}"></image>
  <view class="action">
    <button class="takeBtn" type="primary" bindtap="takePhoto" wx:if="{{!show}}"></button>
    <image class="cancel" bindtap="cancel" wx:if="{{!show}}" src="../../static/img/cancel.png"></image>
    <button class="saveImg" type="primary" bindtap="saveImg" wx:if="{{show}}"></button>
    <button class="cancelBtn" wx:if="{{show}}" type="primary" bindtap="cancelBtn"></button>
  </view>
</view>

下面是wxss

.camera_box {
  height: 100%;
   100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  background: #d9d9d9;
}

.camera {
  height: 86%;
   100%;
  z-index: 999;
}

.id_m {
  height: 100%;
   100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  position: absolute;
}

.id_m .img {
   80%;
  height: 80%;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto auto;
  top: 0;
  bottom: 0;
}

.id_m .tips_txt {
  transform: rotate(90deg);
}

.camera_box .action {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 15%;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 999;
}

.camera_box .takeBtn {
  height: 120rpx;
   120rpx;
  border-radius: 50%;
  font-size: 24rpx;
  background: url('https://cdn.ctoku.com/1123123123123e3241.png') no-repeat center;
  background-size: contain;
  border: none;
  margin-left: 130rpx;
}
.camera_box .cancel{
  height: 120rpx;
   120rpx;
  border-radius: 50%;
  margin-right: 130rpx;
}

.camera_box .cancelBtn {
  font-size: 24rpx;
  height: 120rpx;
   120rpx;
  border-radius: 50%;
  background: url('https://cdn.ctoku.com/12311123342312231.png') no-repeat center;
  background-size: contain;
  border: none;
}

.camera_box .saveImg {
  background: url('https://cdn.ctoku.com/1232123434231231231.png') no-repeat center;
  font-size: 24rpx;
  height: 120rpx;
   120rpx;
  border-radius: 50%;
  background-size: contain;
  border: none;
}

.camera_box .takeBtn::after {
  border: none;
}

.camera_img {
  height: 85vh;
   100%;
}

然后json的话 基本就写了一句  

"component": true

最后就是js代码了

Component({
  properties: {
    Num: {
      type: Number,
      value: 0
    }
  },
  /**
   * 页面的初始数据
   */
  data: {
    Num: '',
    src: '',
    show: false,
    getInfo: false
  },
  methods: {
    upload() {
      this.setData({
        x: 0
      })
      console.log(this.data.x)
    },
    cancelBtn() {
      this.setData({
        show: false
      })
    },
    saveImg() {
      this.triggerEvent('upload', {
        url: this.data.src,
        id: this.data.Num
      })
    },
    takePhoto() {
      const that = this;
      const ctx = wx.createCameraContext()
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          that.setData({
            src: res.tempImagePath,
            show: true
          })
        },
        fail: (err) => {
          console.log(err)
          wx.showToast({
            title: '拍照失败,请重试!',
            icon: 'none'
          })
          that.triggerEvent('error')
        }
      })
    },
    error(e) {
      console.log(e.detail)
      wx.showToast({
        title: '请打开摄像头权限并重试!',
        icon: 'none'
      })
      this.triggerEvent('error')
    },
    cancel() {
      this.triggerEvent('error')
    }
  }
})

以上就是全部组件内容了  js中的Num是用来控制身份证正面的   0 即是人像面  1 是国徽面

那我们组件怎么调用呢?

首先是在json中引入:    "upload": "/components/upload/upload"

然后在页面中需要写入组件

<upload wx:if="{{up}}" Num='{{id}}' bindupload = 'upload' binderror="error"></upload >

以上是我在项目中用的,因为我是组件里面套组件使用的,所以有up判断  不需要的不用加

js中我们需要做组件返回处理  以及报错处理

upload(e) {
      let that = this;
    let img = e.detail.url
    this.setData({
      up: false
    })
    
    that.uploadimg({
      url: that.data.uploadUrl, //这里是你图片上传的接口
      path: [img], //这里是选取的图片的地址数组
  });
  },

error() {

    console.log('err')

    this.setData({

      up:false

    })

  },

最后说一下that.uploadimg是我自己写的上传图片到服务器的方法,有需要的直接按照小程序wx.uploadFile文档操作即可.

如有更优方案,请联系作者,谢谢