uniappを使って写真撮影機能を開発する方法

<template>
  <div class="camera">
    <!-- 显示相机画面的区域 -->
    <camera class="camera-preview" @created="onCameraCreated" @error="onCameraError"></camera>
    <!-- 拍摄按钮 -->
    <button class="capture-button" @click="captureImage">拍摄</button>
    <!-- 显示拍摄后的照片 -->
    <image :src="photoUrl" class="captured-photo"></image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photoUrl: ''
    }
  },
  methods: {
    onCameraCreated(camera) {
      this.camera = camera
      // 相机已创建，可以开始预览
      camera.startPreview()
    },
    onCameraError(error) {
      console.error('Camera error:', error)
    },
    captureImage() {
      // 拍摄照片
      this.camera.takePhoto().then((res) => {
        // 将照片保存到相册
        uni.saveImageToPhotosAlbum({
          filePath: res.tempImagePath,
          success: (res) => {
            uni.showToast({
              title: '保存成功',
              icon: 'success'
            })
          },
          fail: (error) => {
            console.error('Save image error:', error)
          }
        })
        this.photoUrl = res.tempImagePath
      }).catch((error) => {
        console.error('Capture image error:', error)
      })
    }
  }
}
</script>

<style>
.camera {
  position: relative;
  height: 100%;
}

.camera-preview {
  width: 100%;
  height: 100%;
}

.capture-button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #007AFF;
  color: #FFF;
  border-radius: 6px;
  font-size: 16px;
}

.captured-photo {
  width: 300px;
  height: 300px;
  margin-top: 20px;
}
</style>

{
  "mp-weixin": {
    "permission": {
      "scope.camera": {
        "desc": "用于拍摄照片"
      }
    }
  }
}