uni-app 定制相机拍照界面

在uni-app中，你可以通过调用uni.createCameraContext() API来访问相机功能，并自定义拍照界面。以下是一个基本的示例，展示了如何在uni-app中定制相机拍照界面。

首先，确保你已经在manifest.json中配置了相机权限：

"mp-weixin": { // 微信小程序示例
  "appid": "your-app-id",
  "setting": {
    "requestDomain": [],
    "camera": "back" // 可选 front 或 back
  },
  "permission": {
    "scope.userInfo": {
      "desc": "你的位置信息将用于小程序相机拍照功能"
    }
  }
}

然后，在你的页面文件中（如pages/camera/camera.vue），可以如下实现：

<template>
  <view class="container">
    <camera device-position="back" flash="auto" @error="error"></camera>
    <button @tap="takePhoto">拍照</button>
    <image v-if="tempFilePath" :src="tempFilePath" mode="widthFix" class="photo"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tempFilePath: ''
    };
  },
  methods: {
    error(e) {
      console.error(e.detail);
    },
    takePhoto() {
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          this.tempFilePath = res.tempImagePath;
        },
        fail: (err) => {
          console.error(err);
        }
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.photo {
  width: 300px;
  margin-top: 20px;
}
button {
  margin-top: 20px;
}
</style>

在这个示例中：

1. <camera>组件用于显示相机预览界面，device-position属性指定相机位置（前置或后置），flash属性控制闪光灯。
2. 一个按钮用于触发拍照操作，当点击按钮时，调用takePhoto方法。
3. takePhoto方法中，通过uni.createCameraContext()获取相机上下文，并调用takePhoto方法拍照。拍照成功后，将图片的临时路径保存到tempFilePath中，并在页面上显示。

你可以根据需要进一步自定义相机界面，比如添加自定义按钮、水印、滤镜等功能。注意，不同平台（如微信小程序、H5、App等）的相机权限配置和API调用可能有所不同，请参考uni-app官方文档获取更多信息。