如何使用uniapp开发图片拍摄功能

<template><div class="camera">    <!-- 显示相机画面的区域 -->    <camera class="camera-preview"></camera><!-- 拍摄按钮 --><button class="capture-button">拍摄</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": "用于拍摄照片"      }    }  }}