Wechat applet realizes the functions of ID card photographing and cutting

design sketch

Design thinking

Design a mask layer picture , Turn on the camera , Taking pictures , Put the picture on the canvas , Cut according to the size of the mask layer , Get the processed picture .

wxml file

Put the mask layer in , And add buttons and click events

<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>
    <!--  Mask layer photo  -->
    <cover-image class='bgImage1' src='../icons/zhezhao.png'></cover-image>
    <cover-view class='cameratop-view1'> Resident ID card of the people's Republic of China </cover-view>
    <cover-view class='cameratop-view2'>（ positive ）</cover-view>
    <cover-view class='cameracenter-view' style='top:62%'> Please aim at the four corners to take photos </cover-view>

    <!--  Photo button  -->
    <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?" skip ":""}}
      </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 file

Get camera permission first , And turn on the camera

  data: {
    
    isShowCamera: false,
    width: 300,
    height: 190,
    src: "",
    image: "",
    skipphotoStatus: "0", // 1 skip  0 No skipping 
    isShowImage: false,
    url: "",
    phoneWeight: "",
    phoneHeight: "",
    image:"http://print.jiaynet.cn/icons/zhezhao.png",
    show:true,
    showPhoto:false,
    imgUrlZ:"",
    imgUrlF:"",
    chooseID:""
  },
      // Get camera permission and open 
  onShow: function() {
    
    wx.authorize({
    
      scope: 'scope.camera',
      success: function(res) {
    
        this.setData({
    
          isShowCamera: true,
        })
      },
      fail: function(res) {
    
        wx.showModal({
    
          title: ' Request authorization for your camera ',
          content: ' If you need to use this applet function normally , Please press OK and authorize user information on the setup page ',
          confirmText: ' determine ',
          success: res => {
    
            if (res.confirm) {
    
              wx.openSetting({
    
                success: function(res) {
    
                  console.log(' success ');
                  console.log(res);
                  if (res.authSetting['scope.camera']) {
     // Set allow to get camera 
                    console.log(' Set allow to get camera ')
                    wx.showToast({
    
                      title: ' Authorized success ',
                      icon: 'success',
                      duration: 1000
                    })
                    this.setData({
    
                      isShowCamera: true,
                    })

                  } else {
     // Don't allow 
                    wx.showToast({
    
                      title: ' privilege grant failed ',
                      icon: 'none',
                      duration: 1000
                    })
                  }
                }
              })
            } else {
     // Cancel 
              wx.showToast({
    
                title: ' privilege grant failed ',
                icon: 'none',
                duration: 1000
              })
            }
          }
        })
      }
    })
  },

Click the photo event

// Click to take a picture  
takePhotoAction: function() {
    
    if (this.data.show == true){
    
      this.ctx.takePhoto({
    
        quality: 'high', // High-quality 
        success: (res) => {
    
          this.loadTempImagePath(res.tempImagePath);
          this.setData({
    
            image: res.tempImagePath,
            showPhoto: true
          })
        },
      })
    }else{
    
        // Judge according to whether the ID photo is negative or positive 
      if (this.data.chooseID == 1){
    
          // positive 
        let imgUrl = {
     id: this.data.chooseID, src: this.data.imgUrlZ}
        wx.redirectTo({
    
          url: '../idcard/idcard?imgUrl=' + JSON.stringify(imgUrl),
        })
      }else{
    
           // The reverse 
        let imgUrl = {
     id: this.data.chooseID, src: this.data.imgUrlF }
        wx.redirectTo({
    
          url: '../idcard/idcard?imgUrl=' + JSON.stringify(imgUrl),
        })
      }
    }
  },

Process images

// Process images 
  loadTempImagePath(src) {
    
    wx.getSystemInfo({
    
      success: (res) => {
    
        //  The position of the rectangle 
        var res = wx.getSystemInfoSync()
        this.setData({
    
          phoneWidth: res.screenWidth,
          phoneHeight: res.screenHeight
        })
          // According to the size of the mask layer, set the model for positioning x,y Axis , Tailoring 
        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)
            // In the transition page , The path coordinates and size of the picture 
            canvas.drawImage(src, 0, 0, this.data.phoneWidth, this.data.phoneHeight)
            wx.showLoading({
    
              title: ' Data processing ...',
              icon: 'loading',
              duration: 10000
            })
            canvas.draw(false,
              setTimeout(() => {
    
                wx.canvasToTempFilePath({
     // Crop pair parameters 
                  canvasId: "image-canvas",
                  x: imageX, // canvas x Axis start point 
                  y: imageY, // canvas y Axis start point 
                  width: imageWidth, // Canvas width 
                  height: imageHeight, // Canvas height 
                  destWidth: imageWidth, // Output picture width 
                  destHeight: imageHeight, // Output image height 
                  success: (res) => {
    
                    wx.hideLoading()
                    this.setData({
    
                      isShowImage: false,
                      show: false,
                    })
                      // According to the front and back , assignment 
                      if (this.data.chooseID == 1) {
    
                        this.data.imgUrlZ = res.tempFilePath
                      } else {
    
                        this.data.imgUrlF = res.tempFilePath
                      }
                  },
                  fail: function(e) {
    
                    wx.hideLoading()
                    wx.showToast({
    
                      title: ' Error ...',
                      icon: 'loading'
                    })
                    if (this.data.skipphotoStatus == 1) {
    
                      // wx.redirectTo({
    
                      // url: 'addCarInfo/addCarInfo',
                      // })
                    } else {
    
                      wx.navigateBack({
    
                        delta: 1
                      });
                    }
                  }
                });
              }, 1000)
            )
          }
        })
      }
    })
  },

Click to jump directly to this page when taking photos, and you can take photos to process pictures and customize cropping .