需求,需要有一个人的人脸框,需要是一个单独的页面。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"