更新记录

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 使用文档

功能特性

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

安装使用

  1. 先配置小程序:

    /* 小程序特有相关 */
    "mp-weixin" : {
    "appid" : "",
    "setting" : {
        "urlCheck" : false
    },
    "permission": {
        "scope.camera": { "desc": "用于拍照和切换摄像头" }
    },
    "usingComponents" : true
    },
  2. 将组件文件放入项目:

    /components
    └── camera-plus
    ├── camera-plus.vue
    └── assets (自定义图片目录)
  3. 在页面中引入:

    
    <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"
/>
  1. 图片路径规则:
    • 绝对路径:/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 {
    /* 自定义样式 */
    }

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

插件不采集任何数据

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问