直接上代码

<cu-custom bgColor="bg-gradual-white" isBack="{{true}}">

  <view slot="backText"></view>

  <view slot="content" style="font-weight: bold;">扫描VIN码</view>

</cu-custom>

<camera wx:if="{{isShowCamera}}" class="camera-box" devic-position="width" flash="{{flash}}">

  <cover-view class="page-flex" style="width:{{info.windowWidth}}px; height:{{info.windowHeight}}px;">

    <cover-view class="page-mask" style="height:{{topHeight}}px; width:100%">

      <cover-view class="cameraTips" style="margin-top: {{topHeight -35 }}px">可以扫描前挡风，行驶证，车辆铭牌车架号</cover-view>

    </cover-view>

    <cover-view class="cameraregion" style="height:75px;width:100%">

      <cover-view class="page-mask" style="height:75;width:{{edgewidth}}px"></cover-view>

      <cover-image class="active-image" src="../../images/0716073342969601272.png"></cover-image>

      <cover-view class="page-mask" style="height:75;width:{{edgewidth}}px"></cover-view>

    </cover-view>

    <cover-view class="page-mask cameraBgView" style="width:100%;height:{{buttomHeight}}px">

    

      <cover-view

        style="width:100%;height:150px;display: flex;justify-content: center; margin-top:{{buttomHeight-200}}px">

        <cover-view

          style="width:100px;height:150px;display: flex;align-items: center;justify-content: center;flex-direction: column;">

          <cover-image class="takephoto" style="" src='../../images/cameraOK.png' bindtap='takePhotoAction'>

          </cover-image>

          <over-view class="ttext">立即识别</over-view>

        </cover-view>

      </cover-view>

      <cover-view

        style="position: absolute;  width:100px;height:150px;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-left:15px; margin-top:{{buttomHeight-200}}px;">

        <cover-image class="cancelphoto" src='{{sdtsrc}}' bindtap='actionflash' style=""></cover-image>

        <over-view class="ttext">{{sgtext}}</over-view>

      </cover-view>

    </cover-view>

  </cover-view>

</camera>

<canvas wx:if='{{isShowImage}}' canvas-id="image-canvas"

  style='width:{{windowWidth}}px; height:{{windowHeight}}px;'></canvas>

/* pages/camera/camera.wxss */

page {

  width: 100%;

  height: 100%;

  /* background-color: #fff; */

  overflow: hidden;

}

.camera-box {

  width: 100vw;

  height: 100vh;

}

.page-flex {

  /* display: flex; */

}

/*  形成遮罩  */

.page-mask {

  background-color: rgba(0, 0, 0, 0.5);

}

.cameraTips {

  width: 100%;

  text-align: center;

  font-size: 14px;

  color: #FFF;

}

.cameraregion {

  display: flex;

}

.ttext {

  font-size: 28rpx;

  margin-top: 12rpx;

  color:#fff;

  font-weight: bold;

  margin-top: 10px;

  /* z-index: 999; */

}

/* 背景图像view */

.camerabgImage-view {

  height: 100%;

  width: 100%;

  position: absolute;

  z-index: 999;

}

/* 提示文本2 */

.cameraTips2 {

  margin-top: 22%;

  text-align: center;

  color: #fff;

}

.cameraactive {

  margin-top: 12px;

  position: absolute;

  width: 100%;

  display: flex;

  justify-content: center;

}

.active-image {

  display: block;

  width: 350px;

  height: 75px;

}

/* 拍照背景view */

.cameraBgView {

  position: relative;

  

  display: flex;

}

/* 按钮view*/

.cameraButton-view {

  height: 200rpx;

  width: 100%;

  position: absolute;

  display: flex;

  justify-content: space-around;

}

/* 取消按钮 */

.cancelphoto {

  width: 100rpx;

  height: 100rpx;

}

/* 拍照按钮 */

.takephoto {

  border-radius: 999px;

  box-shadow: 0 0 50rpx #ffd8a2;

  width: 152rpx;

  height: 152rpx;

}

核心就是

/*  形成遮罩  */

.page-mask {

  background-color: rgba(0, 0, 0, 0.5);

}

形成遮罩 cover-view 标签

计算 canvas 的裁剪部分