更新记录

1.0.0（2025-03-01） 下载此版本

V1.0.0 1.小程序自定义拍照组件

平台兼容性

uni-app

cameraPlus 使用文档

功能特性

• 全屏相机界面
• 人脸轮廓引导贴图
• 闪光灯控制
• 前后摄像头切换
• 完全样式保留
• 自定义图片支持

安装使用

0. 先配置小程序：

   复制代码/* 小程序特有相关 */
   "mp-weixin" : {
   "appid" : "",
   "setting" : {
       "urlCheck" : false
   },
   "permission": {
       "scope.camera": { "desc": "用于拍照和切换摄像头" }
   },
   "usingComponents" : true
   },

1. 将组件文件放入项目：

   复制代码/components
   └── camera-plus
   ├── camera-plus.vue
   └── assets (自定义图片目录)

2. 在页面中引入：

   复制代码
   <template>
   <view>
   <camera-plus :showFaceOverlay="true" @capture-success="handleCapture" />
   </view>
   </template>

复制代码
## 自定义配置
### Props 参数
| 参数名             | 类型    | 默认值                   | 说明                 |
|--------------------|---------|--------------------------|----------------------|
| faceOverlayImage   | String  | '/static/face-outline.png' | 人脸轮廓图片路径     |
| captureButtonImage | String  | '/static/camera_capture.png' | 拍照按钮图片       |
| switchButtonImage  | String  | '/static/camera_flip.png'   | 切换摄像头按钮图片 |
| flashOnImage       | String  | '/static/flash_on.png'      | 闪光灯开启图标     |
| flashOffImage      | String  | '/static/flash_off.png'     | 闪光灯关闭图标     |
| showFaceOverlay    | Boolean | true                     | 是否显示人脸轮廓   |

### 事件列表
| 事件名称         | 说明             | 回调参数               |
|------------------|------------------|------------------------|
| capture-success  | 拍照成功时触发   | 临时图片路径(tempPath) |
| capture-error    | 拍照失败时触发   | 错误对象               |
| camera-switched  | 摄像头切换时触发 | 当前摄像头方向         |
| flash-changed    | 闪光灯状态变化   | 当前闪光模式           |
| camera-error     | 相机出错时触发   | 错误详情               |

## 自定义图片指南
1. 准备替换图片（推荐尺寸）：
- 人脸轮廓图：750×1334像素（透明PNG）
- 拍照按钮：240×240像素
- 控制按钮：120×120像素

2. 替换默认图片：
```vue
<camera-component
  faceOverlayImage="/static/custom-face.png"
  captureButtonImage="/static/custom-capture.png"
  flashOnImage="/static/custom-flash-on.png"
/>

3. 图片路径规则：
   • 绝对路径：/static/...
   • 相对路径：@/components/cameraPlus/assets/...
   • 网络图片：https://example.com/image.png

注意事项

1. 平台差异：

   • iOS需要添加相机权限描述
   • 微信小程序需声明camera权限
   • H5需要HTTPS环境

2. 静态资源： 建议将自定义图片放在以下目录：

   复制代码/static/
   ├── custom-face.png
   └── custom-capture.png

3. 样式覆盖： 如需修改样式，请使用深度选择器：

   复制代码::v-deep .camera-fullscreen {
   /* 自定义样式 */
   }