本文例項為大家分享了微信小程式實現身份證取景框拍攝的具體程式碼，供大家參考，具體內容如下

wxml

<view class="camera_box">
 <camera class="camera" wx:if="{{!show}}" device-position="back" flash="off" binderror="error">
  <cover-view class="id_m">
   <cover-image class="img" src="https://cdn.ctoku.com/201910234221235312.png"></cover-image>
  </cover-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>
  <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: 100vh; width: 100vw;
 position: relative;
}
.camera {
 height: 85vh; width: 100vw;
 z-index: 1;
}
.id_m {
 height: 85vh; width: 100vw;
 z-index: 999;
 background: rgba(0,0.1);
 display: flex;
 position: absolute;
}
.id_m .img {
 width: 550rpx;
 height: 900rpx;
 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 {
 height: 15vh;
 position: relative;
 display: flex;
 justify-content: space-around;
 align-items: center;
} 
.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;
}
.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%;
}

js

Page({

 /**
  * 頁面的初始資料
  */
 data: {
  src: '',show: false
 },cancelBtn () {
  this.setData({show: false})
 },saveImg () {
  wx.showModal({
   title: '圖片地址',content: this.data.src,})
 },takePhoto() {
  const ctx = wx.createCameraContext()
  const listener = ctx.onCameraFrame((frame) => {
   console.log(frame)
  })
  ctx.takePhoto({
   quality: 'high',success: (res) => {
    console.log(res)
    this.setData({
     src: res.tempImagePath,show: true
    })
    listener.stop({
     success: (res) => {
      console.log(res)
     },fail: (err) =>{
      console.log(err)
     }
    })
   },fail: (err) => {
    console.log(err)
   }
  })
 },error(e) {
  console.log(e.detail)
 },/**
  * 生命週期函式--監聽頁面載入
  */
 onLoad: function (options) {
  
 },/**
  * 生命週期函式--監聽頁面初次渲染完成
  */
 onReady: function () {
  
 },/**
  * 生命週期函式--監聽頁面顯示
  */
 onShow: function () {
  
 },/**
  * 生命週期函式--監聽頁面隱藏
  */
 onHide: function () {
  
 },/**
  * 生命週期函式--監聽頁面解除安裝
  */
 onUnload: function () {
  
 },/**
  * 頁面相關事件處理函式--監聽使用者下拉動作
  */
 onPullDownRefresh: function () {
  
 },/**
  * 頁面上拉觸底事件的處理函式
  */
 onReachBottom: function () {
  
 },/**
  * 使用者點選右上角分享
  */
 onShareAppMessage: function () {
  
 }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。