uni-app 自定义拍照页面需求，类似于下面这样的

当然，为了实现一个自定义拍照页面，你可以使用uni-app结合其提供的camera组件。以下是一个基本的代码示例，展示了如何创建一个自定义拍照页面。

1. 在 pages 目录下创建一个新页面，比如 cameraPage

cameraPage.vue

<template>
  <view class="container">
    <camera
      device-position="back"
      flash="off"
      @error="onError"
      style="width: 100%; height: 100%;"
    >
      <view class="camera-button-container">
        <button @click="takePhoto">拍照</button>
        <button @click="changeFlash">切换闪光灯</button>
      </view>
      <image v-if="tempImagePath" :src="tempImagePath" class="preview-image" mode="widthFix"></image>
    </camera>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tempImagePath: '',
      flashStatus: 'off'
    };
  },
  methods: {
    takePhoto() {
      const context = uni.createCameraContext();
      context.takePhoto({
        quality: 'high',
        success: (res) => {
          this.tempImagePath = res.tempImagePath;
        }
      });
    },
    onError(e) {
      console.error('Camera error:', e.detail);
    },
    changeFlash() {
      this.flashStatus = this.flashStatus === 'off' ? 'on' : 'off';
      this.$refs.camera.setFlash(this.flashStatus);
    }
  },
  mounted() {
    this.$refs.camera.setFlash(this.flashStatus);
  }
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
}
.camera-button-container {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
}
.camera-button-container button {
  margin: 10px 0;
}
.preview-image {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 150px;
}
</style>

2. 配置页面路径

确保在 pages.json 中正确配置了 cameraPage 路径。

{
  "pages": [
    {
      "path": "pages/cameraPage/cameraPage",
      "style": {
        "navigationBarTitleText": "自定义拍照"
      }
    }
    // 其他页面配置...
  ]
}

3. 注意事项

• 确保在 manifest.json 中已经配置了相机权限。
• 由于不同平台的差异，可能需要在各个平台（如微信小程序、H5、App等）上做一些适配。
• 本示例中的闪光灯切换功能需要平台支持，某些平台可能不支持此功能。

这样，你就创建了一个基本的自定义拍照页面，用户可以通过点击按钮拍照并预览照片，还可以切换闪光灯状态。