微信小程序实现身份证拍及摄裁剪功能

效果图

设计思路

设计一个遮罩层图片，打开摄像头，拍照，把照片放进画布上，根据遮罩层的尺寸进行裁剪，得出处理后的图片。

wxml文件

把遮罩层放进去，并加上按钮和点击事件

<camera wx:if="{{isShowCamera}}" flash="off" style="height:100vh;">
  <cover-view class='camerabgImage-view'>
    <cover-image wx:if="{{showPhoto}}" class='bgImage' src='{{image}}'> </cover-image>
    <!-- 遮罩层照片 -->
    <cover-image class='bgImage1' src='../icons/zhezhao.png'></cover-image>
    <cover-view class='cameratop-view1'>中华人民共和国居民身份证</cover-view>
    <cover-view class='cameratop-view2'>（正面）</cover-view>
    <cover-view class='cameracenter-view' style='top:62%'>请对准四个角拍照</cover-view>

    <!-- 拍照按钮 -->
    <cover-view class='camerabotton-view' style='bottom:0px'>
      <cover-image class='cancelphoto'
        src='{{show == true ? "../icons/close.png" : "../icons/return.png" }}'
        bindtap='cancelPhotoAction'></cover-image>
      <cover-image class='takephoto'
        src='{{show == true ? "../icons/paizhao.png" : "../icons/sure.png" }}'
        bindtap='takePhotoAction'></cover-image>
      <cover-view class='skipphoto' bindtap='skipphotoAction'>{{skipphotoStatus==1?"跳过":""}}
      </cover-view>
    </cover-view>
  </cover-view>
</camera>

<canvas wx:if='{{isShowImage}}' canvas-id="image-canvas"
  style='width:{{phoneWidth*2}}rpx;height:{{phoneHeight*2}}rpx;'></canvas>

js文件

先获取摄像头权限，并打开摄像头

  data: {
    isShowCamera: false,
    width: 300,
    height: 190,
    src: "",
    image: "",
    skipphotoStatus: "0", // 1跳过 0没有跳过
    isShowImage: false,
    url: "",
    phoneWeight: "",
    phoneHeight: "",
    image:"http://print.jiaynet.cn/icons/zhezhao.png",
    show:true,
    showPhoto:false,
    imgUrlZ:"",
    imgUrlF:"",
    chooseID:""
  },
      //获取摄像头权限并打开
  onShow: function() {
    wx.authorize({
      scope: 'scope.camera',
      success: function(res) {
        this.setData({
          isShowCamera: true,
        })
      },
      fail: function(res) {
        wx.showModal({
          title: '请求授权您的摄像头',
          content: '如需正常使用此小程序功能，请您按确定并在设置页面授权用户信息',
          confirmText: '确定',
          success: res => {
            if (res.confirm) {
              wx.openSetting({
                success: function(res) {
                  console.log('成功');
                  console.log(res);
                  if (res.authSetting['scope.camera']) { //设置允许获取摄像头
                    console.log('设置允许获取摄像头')
                    wx.showToast({
                      title: '授权成功',
                      icon: 'success',
                      duration: 1000
                    })
                    this.setData({
                      isShowCamera: true,
                    })

                  } else { //不允许
                    wx.showToast({
                      title: '授权失败',
                      icon: 'none',
                      duration: 1000
                    })
                  }
                }
              })
            } else { //取消
              wx.showToast({
                title: '授权失败',
                icon: 'none',
                duration: 1000
              })
            }
          }
        })
      }
    })
  },

点击拍照事件

//点击拍照  
takePhotoAction: function() {
    if (this.data.show == true){
      this.ctx.takePhoto({
        quality: 'high', //高质量
        success: (res) => {
          this.loadTempImagePath(res.tempImagePath);
          this.setData({
            image: res.tempImagePath,
            showPhoto: true
          })
        },
      })
    }else{
        //根据拍证件照是反面还是正面进行判断
      if (this.data.chooseID == 1){
          //正面
        let imgUrl = { id: this.data.chooseID, src: this.data.imgUrlZ}
        wx.redirectTo({
          url: '../idcard/idcard?imgUrl=' + JSON.stringify(imgUrl),
        })
      }else{
           //反面
        let imgUrl = { id: this.data.chooseID, src: this.data.imgUrlF }
        wx.redirectTo({
          url: '../idcard/idcard?imgUrl=' + JSON.stringify(imgUrl),
        })
      }
    }
  },

处理图像

//处理图像
  loadTempImagePath(src) {
    wx.getSystemInfo({
      success: (res) => {
        // 矩形的位置
        var res = wx.getSystemInfoSync()
        this.setData({
          phoneWidth: res.screenWidth,
          phoneHeight: res.screenHeight
        })
          //根据遮罩层的尺寸设配机型进行定位x,y轴，进行裁剪
        var imageX = 0.1 * this.data.phoneWidth;
        var imageY = 0.25 * this.data.phoneHeight;
        var imageWidth = 0.8 * this.data.phoneWidth;
        var imageHeight =0.25 * this.data.phoneHeight;
        wx.getImageInfo({
          src,
          success: (res) => {
            this.setData({
              isShowImage: true,
            })
            const canvas = wx.createCanvasContext("image-canvas", this)
            //过渡页面中，图片的路径坐标和大小
            canvas.drawImage(src, 0, 0, this.data.phoneWidth, this.data.phoneHeight)
            wx.showLoading({
              title: '数据处理中...',
              icon: 'loading',
              duration: 10000
            })
            canvas.draw(false,
              setTimeout(() => {
                wx.canvasToTempFilePath({ //裁剪对参数
                  canvasId: "image-canvas",
                  x: imageX, //画布x轴起点
                  y: imageY, //画布y轴起点
                  width: imageWidth, //画布宽度
                  height: imageHeight, //画布高度
                  destWidth: imageWidth, //输出图片宽度
                  destHeight: imageHeight, //输出图片高度
                  success: (res) => {
                    wx.hideLoading()
                    this.setData({
                      isShowImage: false,
                      show: false,
                    })
                      //根据正反面，赋值
                      if (this.data.chooseID == 1) {
                        this.data.imgUrlZ = res.tempFilePath
                      } else {
                        this.data.imgUrlF = res.tempFilePath
                      }
                  },
                  fail: function(e) {
                    wx.hideLoading()
                    wx.showToast({
                      title: '出错啦...',
                      icon: 'loading'
                    })
                    if (this.data.skipphotoStatus == 1) {
                      // wx.redirectTo({
                      //   url: 'addCarInfo/addCarInfo',
                      // })
                    } else {
                      wx.navigateBack({
                        delta: 1
                      });
                    }
                  }
                });
              }, 1000)
            )
          }
        })
      }
    })
  },

点击拍照的时候直接跳转此页面就可以拍照处理图片并且自定义裁剪。