uniapp 自定义相机插件(组件版、缩放、裁剪)组件 Ba-CameraView

自定义相机插件(组件版、缩放、裁剪) Ba-CameraView

简介(下载地址

Ba-CameraView 是一款自定义相机拍照组件,支持任意界面,支持裁剪

  • 支持任意自定义界面
  • 支持手势缩放
  • 支持裁剪(手势拖动、比例设置、旋转)
  • 支持自定义保存路径

截图地址


也可关注博客,实时更新最新插件

uniapp 常用原生插件大全


使用方法(示例)

template 中直接引用

vue 复制代码
		<Ba-CameraView ref="cameraView" class="camera-view" :load="loadData">
		</Ba-CameraView>

script 中调用

javascript 复制代码
	const toast = uni.requireNativePlugin('Ba-Toast')
export default {
	data() {
		return {
			loadData: { //配置
				isToast: true
			},
			msgList: []
		}
	},
	onReady() {
		this.setListener(); //设置监听
	},
	methods: {
		onTakePicture() {//拍照
			this.$refs.cameraView.takePicture((res) => {
				this.showToast(res.msg)
			})
		},
		setListener() {
			this.$refs.cameraView.setListener((res) => {
				if (res.action == "error") {
					this.showToast(res.msg)
				}
			})
		},
		showToast(msg) {
			toast.showToast({
				title: msg
			});
		}
	}
}

API

load 配置

属性名 类型 默认值 说明
isShowVibrate Boolean true 拍照成功,是否震动提示
zoom Boolean false 是否支持手势缩放

takePicture 拍照方法

属性名 类型 必填 说明
isCrop Boolean false 是否裁剪,默认false
path String false 图片保存路径

回调参数

属性名 类型 说明
path String 图片路径,res.data.path
相关推荐
k4m7v2pz4 天前
Godot 4 仿 agar.io:相机缩放被 max_zoom 卡死,窗口越大球越小的根因与修复
游戏引擎·godot·相机·缩放·clamp·camera2d
zjwxhhzhf12 天前
2026.8.20前后端接口联调的问题
前端·uniapp·前后端对接·接口联调
梦想的颜色20 天前
AI 时代小白 VibeCoding 做 APP:UniApp(含 Uni‑X)、Flutter 与 React Native+Expo全维度技术选型对比指南
flutter·react native·app·uniapp·vibecoding·unippx·app产品
梦想的颜色25 天前
UniApp 请求层终极封装:统一拦截、错误处理、多端兼容,结合 Claude Code 高效落地
服务器·uniapp·uni.request·codex·claudecode·ai 辅助开发·uniapp 请求封装
pursue.dreams1 个月前
基于若依(RuoYi)二次开发的自营商城系统:从架构设计到落地的全栈实践
uniapp·商城·若依
RuoyiOffice1 个月前
超级个体接私活必看:后端+前端+移动端三端一体企业管理系统怎么选(2026)
java·spring boot·vue·uniapp·全栈·企业管理·接私活
蜡台1 个月前
使用 uni-popup 实现数据选择器Data-Picker
前端·javascript·html·uniapp·uni-popup·data-picker
蜡台3 个月前
uni-indexed-list 之扩展组件实现城市列表带索引查询过滤功能
前端·vue.js·uniapp·uni-indexed
互联网散修3 个月前
鸿蒙实战:从零实现自定义相机(上)——架构设计与核心实现
数码相机·华为·harmonyos·自定义相机
资深备胎一号3 个月前
uniapp云打包的ios证书和profile文件从哪里来
uniapp·p12证书