2021-04-16 小程序自定义拍照界面

需求，需要有一个人的人脸框，需要是一个单独的页面。UI给的图是需要进行裁剪

html:

用camera组件，用cover-image来加入蒙版。拍照的按钮需要不单独写在camera外面,因为camera在微信小程序的层级是最高的，所以是没办法用view去定位覆盖层级。所以这里就加一个按钮的图片用cover-image

<view class="container">
<!-- 拍照页面 -->
<view class="takePhoto" hover-class="none" hover-stop-propagation="false" wx:if="{
  {photo}}">
  <camera binderror="handleCameraError" device-position="front" style="height:100vh;width:100%" flash="off"  wx:if="{
  {authCamera}}">  
    <cover-view>  
      <cover-image class="line" src="https://gateway.office.k2software.cn:28088/file-rest/api/file/download//upload/c1115ad70c954c60bc205345b5780b82.png"></cover-image>  
      </cover-view>  
      <cover-image  src="/images/reports/Camera.png" bindtap="takePhoto"></cover-image>  
    </cover-view>  
  </camera>  
<!-- 如果没有授权，出现授权按钮重新授权 -->
 <view class="error-handler" wx:if="{
  {!authCamera}}">  
    <button class="nobtn" openType="openSetting" bindopensetting="openSetting">打开相机授权</button>  
</view>  
</view>
<!-- 重新拍照 -->
<view class="reTakePhoto" hover-class="none" hover-stop-propagation="false" wx:if="{
  {!photo}}">
  <view class="img" hover-class="none" hover-stop-propagation="false">
    <image src="{
  {tempImagePath}}" mode="widthFix" lazy-load="false"></image>
    <canvas canvas-id="image-canvas" style="width:{
  {windowWidth}}px;height:{
  {windowHeight}}px;position: absolute; left: -9999rpx;"></canvas>
      <view style="color:red;font-size:14px;" hover-class="none" hover-stop-propagation="false" wx:if="{
  {noQualified}}">
        {
  {errMsg}}
        </view>
  </view>
  <view class="reTakePhotobtn" hover-class="none" hover-stop-propagation="false"