uniapp开发app时，app端uni.chooseImage使用相机拍照时如何添加实现拍照取景框遮罩层

在UniApp中，如果你想要在调用`uni.chooseImage`让用户通过相机拍摄照片时添加一个自定义的拍照取景框遮罩层，你可以遵循以下步骤：

1. **创建遮罩组件**：首先，在项目的`components`目录下创建一个新的Vue组件，比如`CustomCameraMask.vue`，在这个组件里设计你的遮罩层样式和交互。

<template>
  <div class="custom-mask" @touchstart.prevent="handleStart" @touchmove.prevent="handleMove" @touchend="handleEnd">
    <div class="mask-layer"></div>
  </div>
</template>

<style scoped>
.custom-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 遮罩层半透明黑色 */
  pointer-events: none; /* 开始时阻止默认事件 */
}

.mask-layer {
  // 根据需求定制边框、圆角等样式
}
</style>

<script setup>
import { ref } from 'vue';

const touchStartPos = ref({ x: null, y: null });
function handleStart(e) {
  touchStartPos.value = { x: e.touches[0].clientX, y: e.touches[0].clientY };
}

function handleMove(e) {
  const currentTouchPos = { x: e.touches[0].clientX, y: e.touches[0].clientY };
  const maskWidth = document.documentElement.clientWidth;
  const maskHeight = document.documentElement.clientHeight;
  
  // 计算并设置遮罩层的位置
  const top = touchStartPos.value.y - (currentTouchPos.y - touchStartPos.value.y);
  const left = touchStartPos.value.x - (currentTouchPos.x - touchStartPos.value.x);

  if (top > 0 && top < maskHeight && left > 0 && left < maskWidth) {
    this.$refs.customMask.style.transform = `translate(${left}px, ${top}px)`;
  }
}

function handleEnd() {
  // 遮罩层移除或隐藏
  this.$refs.customMask.style.display = 'none';
}
</script>

2. **在需要的地方引入遮罩组件**：在你的拍照功能页面上，如`cameraPage.vue`中导入这个自定义组件，并在其适当的位置显示它。

<template>
  <!-- 其他内容 -->
  <custom-camera-mask ref="customMask"></custom-camera-mask>
  <button @click="takePhoto">拍照</button>
</template>

<script>
import CustomCameraMask from '@/components/CustomCameraMask.vue';

export default {
  components: {
    CustomCameraMask,
  },
  methods: {
    takePhoto() {
      uni.showLoading({
        title: '正在拍照',
      });
      uni.chooseImage({
        success: ({ tempFilePaths }) => {
          // 拍照成功处理图片路径
          uni.hideLoading();
          // 在这里隐藏或关闭遮罩层
          this.$refs.customCameraMask.style.display = 'none';
        },
        fail: () => {
          uni.hideLoading();
          console.error('拍照失败');
        },
      });
    },
  },
};
</script>

当你点击“拍照”按钮时，遮罩层会出现在屏幕上，用户可以在其内部自由移动相机取景框，拍照完成后遮罩层会自动消失。