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
相关推荐
初级代码游戏8 天前
C#:程序发布的大小控制 裁剪 压缩
c#·.net·dotnet·压缩·大小·发布·裁剪
计算机程序设计小李同学12 天前
基于Web和Android的漫画阅读平台
java·前端·vue.js·spring boot·后端·uniapp
码界奇点13 天前
基于Spring Boot 3与UniApp的跨平台新零售电商系统设计与实现
spring boot·uni-app·毕业设计·uniapp·零售·源代码管理
此颜差矣。13 天前
unibest:基于 Vite + Vue 3 的 Uni-app 开发终极方案
uniapp·unibest·移动端框架
charlee4416 天前
《实时渲染》第2章-图形渲染管线-2.3几何处理
投影·裁剪·几何处理·顶点着色·屏幕映射
空中湖18 天前
深入了解内心世界:免费依恋型人格测试,探索亲密关系中的自己
程序人生·uniapp·unicloud
Rysxt_23 天前
UniApp 集成 SQLite 数据库完整教程
sqlite·uniapp
豌豆学姐1 个月前
Sora2 短剧视频创作中如何保持人物一致性?角色创建接口教程
android·java·aigc·php·音视频·uniapp
科技D人生1 个月前
Vue.js 学习总结(19)—— Vue3 按钮防重复点击三种方案总结
前端·vue.js·uniapp·vue3 防重复提交·uniapp 防重复提交·前端防抖
脾气有点小暴1 个月前
uv-drop-down-popup 在 iOS 真机中随屏幕滚动偏移
ios·uniapp·uv