更新记录

1.1.0（2026-09-05）

• 拍照：支持前置/后置摄像头切换，JPEG/PNG 导出
• 图片裁剪：矩形/圆角矩形/圆形裁剪框，自定义比例，手势拖拽缩放
• 水印：实时时间水印、自定义文字/图片水印
• 闪光灯：torch 常亮模式（Android Chrome / 小程序支持，iOS Safari ）
• 手势缩放：双指 pinch-to-zoom，硬件缩放优先，CSS 缩放
• 点击对焦：单指点击触发对焦动画，H5 端支持手动指定对焦位置
• 横竖屏切换：自动检测屏幕旋转，UI 等比缩放适配横屏
• 加载提示：相机启动时显示 loading 动画，支持自定义颜色/尺寸/文字
• 相册选图：从系统相册选择图片（可进入裁剪流程）
• 内存管理：Object URL 自动释放，避免内存泄漏

平台兼容性

uni-app(5.0)

ux-camera 跨平台相机组件

跨平台相机组件，支持拍照、图片裁剪、水印、闪光灯、手势缩放、点击对焦、横竖屏切换，兼容 H5 / APP / 小程序，Vue2 / Vue3 双版本支持。

依赖

• ux-svg-icon 模块（SVG 图标）

平台兼容性

功能特性

• 拍照：支持前置/后置摄像头切换，JPEG/PNG 导出
• 图片裁剪：矩形/圆角矩形/圆形裁剪框，自定义比例，手势拖拽缩放
• 水印：实时时间水印、自定义文字/图片水印
• 闪光灯：torch 常亮模式（Android Chrome / 小程序支持，iOS Safari ）
• 手势缩放：双指 pinch-to-zoom，硬件缩放优先，CSS 缩放
• 点击对焦：单指点击触发对焦动画，H5 端支持手动指定对焦位置
• 横竖屏切换：自动检测屏幕旋转，UI 等比缩放适配横屏
• 加载提示：相机启动时显示 loading 动画，支持自定义颜色/尺寸/文字
• 相册选图：从系统相册选择图片（可进入裁剪流程）
• 内存管理：Object URL 自动释放，避免内存泄漏

快速使用

<template>
  <ux-camera
    title="拍照"
    facing="environment"
    :enable-zoom="true"
    :enable-autofocus="true"
    :enable-orientation="true"
    @ready="onReady"
    @photo="onPhoto"
    @error="onError"
    @back="onBack"
  />
</template>

<script>
import UxCamera from '@/uni_modules/ux-camera/components/ux-camera/ux-camera.vue'
//#ifdef APP-PLUS
import UxCamera from '@/uni_modules/ux-camera/components/ux-camera/ux-camera.nvue'
// #endif
export default {
  components: { UxCamera },
  methods: {
    onReady(e) { console.log('相机就绪', e) },
    onPhoto(result) {
      // result.tempFilePath  图片路径
      // result.width / result.height  图片尺寸
      // result.blob  Blob 对象（H5 端，可用于上传）
    },
    onError(msg) { uni.showToast({ title: msg, icon: 'none' }) },
    onBack() { uni.navigateBack() },
  },
}
</script>

Props

cropConfig 配置项

loadingStyle 配置项

Events

Slots

组件方法（通过 ref 调用）

目录结构

uni_modules/ux-camera/
├── components/ux-camera/
│   ├── ux-camera.vue           # 入口组件
│   ├── camera/
│   │   ├── ux-camera-h5.vue    # H5 平台实现
│   │   ├── ux-camera-mp.vue    # 小程序平台实现
│   │   └── ux-camera-app.vue   # APP 平台实现
│   ├── crop/
│   │   ├── ux-image-cropper.vue # 图片裁剪组件
│   │   └── crop-config.js       # 裁剪配置常量
│   ├── ux-popup/
│   │   ├── ux-popup.vue                 # 弹窗组件
│   ├── ux-svg-icon/
│   │   ├── ux-svg-icon.vue          # svg icon 组件
│   └── utils/
│       └── index.js             # H5 工具方法（压缩、Base64、ObjectURL）
├── package.json
├── changelog.md
└── readme.md

隐私声明

• 组件运行时需请求摄像头权限
• 拍摄的照片数据仅在本地处理，不上传任何服务器
• 不收集、不存储、不传输任何用户隐私数据