ux-camera 跨平台相机组件

ux-camera 跨平台相机组件跨平台相机组件支持取景框、拍照、图片裁剪、水印、闪光灯、手势缩放、点击对焦、横竖屏切换兼容 H5 / APP / 小程序Vue2 / Vue3 双版本支持。演示图插件地址ux-camera 跨平台相机组件平台兼容性平台支持实现方式H5 (Chrome)✅getUserMedia CanvasH5 (Safari iOS)✅getUserMedia闪光灯不支持APP (Android)✅live-pusherAPP (iOS)✅live-pusher微信小程序✅camera 组件支付宝/百度/头条/QQ 小程序✅camera 组件Vue 2✅条件编译兼容Vue 3✅条件编译兼容功能特性拍照支持前置/后置摄像头切换JPEG/PNG 导出图片裁剪矩形/圆角矩形/圆形裁剪框自定义比例手势拖拽缩放水印实时时间水印、自定义文字/图片水印闪光灯torch 常亮模式Android Chrome / 小程序支持iOS Safari 手势缩放双指 pinch-to-zoom硬件缩放优先CSS 缩放点击对焦单指点击触发对焦动画H5 端支持手动指定对焦位置横竖屏切换自动检测屏幕旋转UI 等比缩放适配横屏加载提示相机启动时显示 loading 动画支持自定义颜色/尺寸/文字相册选图从系统相册选择图片可进入裁剪流程内存管理Object URL 自动释放避免内存泄漏快速使用templateux-cameratitle拍照facingenvironment:enable-zoomtrue:enable-autofocustrue:enable-orientationtruereadyonReadyphotoonPhotoerroronErrorbackonBack//templatescriptimportUxCamerafrom/uni_modules/ux-camera/components/ux-camera/ux-camera.vue//#ifdef APP-PLUSimportUxCamerafrom/uni_modules/ux-camera/components/ux-camera/ux-camera.nvue// #endifexportdefault{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()},},}/scriptProps属性类型默认值说明titleString拍照顶部标题hintTextString底部提示文字facingStringenvironment摄像头方向environment后置 /user前置resolutionStringhigh分辨率low/medium/highwatermarkObjectnull水印配置watermarkEnabledBooleanfalse是否启用水印enableCropBooleanfalse是否开启拍照后裁剪cropConfigObject{}裁剪配置透传给裁剪组件enableZoomBooleantrue是否启用手势缩放enableAutofocusBooleantrue是否启用点击对焦zoomRangeArray[1, 4]缩放范围[min, max]enableOrientationBooleantrue是否启用横竖屏切换loadingStyleObject{}加载层样式配置cropConfig 配置项属性类型默认值说明cropShapeStringrect裁剪框形状rect/round-rect/circleaspectRatioNumber0宽高比0自由 /1正方 /1.585身份证 /4/3/16/9cropWidthNumber0固定裁剪框宽优先级高于 aspectRatiocropHeightNumber0固定裁剪框高minCropWidthNumber100最小裁剪框宽minCropHeightNumber100最小裁剪框高roundRadiusNumber0round-rect 圆角半径minScaleNumber0.5图片最小缩放倍数maxScaleNumber5图片最大缩放倍数maskColorStringrgba(0,0,0,0.6)遮罩颜色qualityNumber0.92JPEG 压缩质量 0~1fileTypeStringjpg导出格式jpg/pngexportOriginalResolutionBooleanfalse是否按原图像素导出canResizeFrameBooleantrue是否允许调整裁剪框大小loadingStyle 配置项属性类型默认值说明loadingColorString#3be8a5spinner 颜色loadingSizeNumber80spinner 尺寸rpxloadingTextString正在启动相机...提示文字loadingTextColorStringrgba(255,255,255,0.7)文字颜色loadingBgStringrgba(0,0,0,0.85)遮罩背景色Events事件名参数说明ready{ width, height }相机就绪photo{ tempFilePath, width, height, blob?, hasWatermark }拍照完成或裁剪完成errorString错误信息back-点击返回按钮flash-changetorch/off闪光灯状态变化switch-cameraenvironment/user摄像头切换orientation-change{ orientation, isLandscape, screenWidth, screenHeight }屏幕方向变化Slots插槽名说明default取景框覆盖层身份证框、银行卡框等hint底部提示区域自定义内容组件方法通过 ref 调用方法说明openCamera()打开相机closeCamera()关闭相机takePhoto()拍照toggleFlash()切换闪光灯目录结构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隐私声明组件运行时需请求摄像头权限拍摄的照片数据仅在本地处理不上传任何服务器不收集、不存储、不传输任何用户隐私数据