更新记录
1.0.0(2025-03-01) 下载此版本
V1.0.0 1.小程序自定义拍照组件
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
cameraPlus 使用文档
功能特性
- 全屏相机界面
- 人脸轮廓引导贴图
- 闪光灯控制
- 前后摄像头切换
- 完全样式保留
- 自定义图片支持
安装使用
-
先配置小程序:
/* 小程序特有相关 */ "mp-weixin" : { "appid" : "", "setting" : { "urlCheck" : false }, "permission": { "scope.camera": { "desc": "用于拍照和切换摄像头" } }, "usingComponents" : true },
-
将组件文件放入项目:
/components └── camera-plus ├── camera-plus.vue └── assets (自定义图片目录)
-
在页面中引入:
<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"
/>
- 图片路径规则:
- 绝对路径:
/static/...
- 相对路径:
@/components/cameraPlus/assets/...
- 网络图片:
https://example.com/image.png
- 绝对路径:
注意事项
-
平台差异:
- iOS需要添加相机权限描述
- 微信小程序需声明camera权限
- H5需要HTTPS环境
-
静态资源: 建议将自定义图片放在以下目录:
/static/ ├── custom-face.png └── custom-capture.png
-
样式覆盖: 如需修改样式,请使用深度选择器:
::v-deep .camera-fullscreen { /* 自定义样式 */ }