uni-app 原生相机样式修改

在uni-app中，虽然直接使用原生相机功能相对有限，但你可以通过一些技巧来修改原生相机的界面样式。虽然直接定制相机界面的样式是不可能的，因为原生组件的样式通常由原生平台控制，但你可以通过自定义覆盖层（overlay）来实现类似的效果。

以下是一个示例，展示如何在uni-app中使用相机并添加一个自定义覆盖层来模拟样式修改：

1. 创建页面并引入相机组件：

<template>
  <view class="container">
    <camera device-position="back" flash="off" @error="handleError"></camera>
    <view class="overlay">
      <!-- 在这里添加你的自定义样式，比如按钮、文本等 -->
      <button @click="takePhoto">拍照</button>
    </view>
  </view>
</template>

1. 定义样式：

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

camera {
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  flex-direction: column;
}

button {
  background-color: white;
  border: none;
  padding: 10px;
  margin-top: 20px;
  border-radius: 5px;
}
</style>

1. 实现拍照功能：

<script>
export default {
  methods: {
    takePhoto() {
      const context = uni.createCameraContext();
      context.takePhoto({
        quality: 'high',
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          console.log(tempFilePaths);
          // 可以在这里处理拍照后的图片，比如预览或上传
        },
        fail: (err) => {
          console.error(err);
        }
      });
    },
    handleError(e) {
      console.error(e.detail);
    }
  }
}
</script>

在这个例子中，我们通过<camera>组件调用原生相机，并在其上添加一个view作为覆盖层，通过CSS设置覆盖层的样式，比如半透明背景和居中的按钮。这种方式虽然不能直接修改相机本身的界面，但提供了一个灵活的方式来添加自定义样式和功能。你可以根据需要进一步定制覆盖层的内容和样式。