关于小程序uniapp中苹果相机水印消失的兼容性优化

最新推荐文章于 2024-07-14 18:54:15 发布

不爱吃香菜的蟹老板

最新推荐文章于 2024-07-14 18:54:15 发布

阅读量275

点赞数

文章标签：小程序 uni-app 数码相机

本文链接：https://blog.csdn.net/qq_42635033/article/details/130359374

版权

文章介绍了如何在苹果设备上通过弹窗调用相机功能，并自定义相机界面添加水印。使用cover-view组件配合z-index属性，可以优化DOM层级，确保水印不会被新的相机组件覆盖。同时提到了拍照、切换摄像头和收起相机的功能实现。

摘要由CSDN通过智能技术生成

苹果相机

通过弹窗调用camera自定义相机，加上的水印下次进入会被新的相机组件覆盖可以用cover-view 配合z-
index修改层级优化
在这里插入图片描述
dom

<!-- 自定义拍照全屏 -->
    <u-popup
      v-model="showCameraModal"
      mode="bottom"
      border-radius="0"
      class="camera-bottom-full-screen__modal"
    >
      <view class="camera-bottom-full-screen">
        <camera
          v-if="showCameraModal"
          style="width: 100vw; height: 100vh"
          device-position="back"
          flash="off"
          binderror="error"
        ></camera>
      </view>
      <!-- 水印文案 -->
      <cover-view class="watermarking">
        <cover-view class="line-wrap" > {{ userInfo.realName }} </cover-view >
        <cover-view  class="class">
          <cover-view  class="date line-wrap">
            {{ date }}
          </cover-view >
          <cover-view class="line-wrap"> {{ week }} {{ hourMinutes }} </cover-view >
        </cover-view >
        <cover-view  class="address line-wrap">
          {{ form.signPlace }}
        </cover-view >
      </cover-view>
      <!-- 拍照按钮 -->
      <cover-view  @click="takePhoto" class="camera__take__button flex-center">
        <cover-view  class="camera__take__button--inside"> </cover-view >
      </cover-view >
      <!-- 收起摄像机按钮 -->
      <cover-view  @click="onCameraSlideDown" class="camera__slide__down">
        <!-- <image src=""></image> -->
        取消
      </cover-view >
      <!-- 转置前后摄像机按钮 -->
      <!-- <view class="camera__switch">
		  转置
	  </view> -->
    </u-popup>

css

.watermarking,.camera__take__button,.camera__slide__down{
  z-index: 1000;
  .line-wrap{
    height: 40rpx;
    line-height: 40rpx;
    font-size: 28rpx;
  }
}