小程序上傳身份證 圖框限制

很多時候我們項目中都需要到身份證,然后上傳的時候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%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  background: #d9d9d9;
}

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

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

.id_m .img {
  width: 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;
  width: 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;
  width: 120rpx;
  border-radius: 50%;
  margin-right: 130rpx;
}

.camera_box .cancelBtn {
  font-size: 24rpx;
  height: 120rpx;
  width: 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;
  width: 120rpx;
  border-radius: 50%;
  background-size: contain;
  border: none;
}

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

.camera_img {
  height: 85vh;
  width: 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文檔操作即可.

如有更優方案,請聯系作者,謝謝