实现思路：使用媒体组件camera使用设备相机功能，再使用覆盖原生组件的cover-view及cover-image实现相机之上的取景框，当然取景框为背景透明图片。目前微信小程序原生组件已经支持同层渲染，文中cover-view及cover-image也可以使用view及image来替代实现。其中camera使用还涉及到scope.camera授权，可自行添加授权代码。

wxml代码：

<view class="camera_box">
  <camera class="camera" wx:if="{{!btnShow}}" device-position="back" flash="off">
    <cover-view class="cover_view">
      <cover-image class="cover_legend" src="test/frame.png"></cover-image>
    </cover-view>
  </camera>
  <image class="camera_thumb" src="{{idCardUrl}}" wx:if="{{btnShow}}"></image>
  <view class="camera_btn">
    <image src="test/taking_pictures.png" mode="widthFix" bindtap="takeingPhoto" wx:if="{{!btnShow}}"></image>
    <image src="test/taking_confirm.png" mode="widthFix" bindtap="savePhoto" wx:if="{{btnShow}}"></image>
    <image src="test/taking_back.png" mode="widthFix" bindtap="cancelPhoto" wx:if="{{btnShow}}"></image>
  </view>
</view>

wxss代码：

.camera_box{height: 100vh;width: 100vw}
.camera_box .camera{height: 60vh;width: 100vw;z-index: 1}
.camera_box .cover_view{height: 60vh;width: 100vw;z-index: 999;display: flex}
.camera_box .cover_view .cover_legend{width: 90%;height: 430rpx;margin: auto}
.camera_box .camera_thumb{height: 60vh;width: 100%}
.camera_box .camera_btn{height: 40vh;display: flex;justify-content: space-around;align-items: center;background: rgba(0, 0, 0, .5);}
.camera_box .camera_btn image{width: 120rpx;}

js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    idCardUrl: '',
    btnShow: false
  },

  /**
   * 取消
   */
  cancelPhoto () {
    this.setData({
      btnShow: false,
      idCardUrl: ''
    })
  },
  
  /**
   * 保存
   */
  savePhoto(){
    wx.showModal({
      title: '图片地址',
      content: this.data.idCardUrl
    })
  },
  
  /**
   * 拍照
   */
  takeingPhoto() {
    const ctx = wx.createCameraContext();
    const listener = ctx.onCameraFrame();
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          idCardUrl: res.tempImagePath,
          btnShow: true
        })
        listener.stop({
          success: (res) => {
            console.log(res)
          },
          fail: (err) =>{
            console.log(err)
          }
        })
      },fail: (err) => {
        console.log(err)
      }
    })
  }
  
})

图片资源相关链接：
https://pan.baidu.com/s/15TIvEPGaG6WkQOhjFMJaLg

提取码：gdzl
解压密码：www.yangbike.com