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
相关推荐
小程序照片合成18 小时前
uniapp微信小程序开发工具本地获取指定页面二维码
微信小程序·小程序·uniapp·二维码
奔跑吧邓邓子4 天前
【商城实战(92)】高并发下的商城缓存进阶:从原理到实战
redis·缓存·springboot·uniapp·element plus·商城实战
奔跑吧邓邓子6 天前
【商城实战(74)】数据采集与整理,夯实电商运营基石
springboot·uniapp·element plus·商城实战·商城数据采集与整理
奔跑吧邓邓子14 天前
【商城实战(49)】解锁小程序端适配与优化,让商城飞起来
uniapp·小程序优化·商城实战·小程序适配
奔跑吧邓邓子20 天前
【商城实战(24)】商城性能大揭秘:压力测试与性能监控实战
springboot·压力测试·uniapp·element plus·性能监控·商城实战
奔跑吧邓邓子21 天前
【商城实战(26)】移动端交互优化实战秘籍
spring boot·uniapp·商城实战·移动端交互优化
奔跑吧邓邓子22 天前
【商城实战(23)】筑牢安全防线,防范常见漏洞
安全·springboot·uniapp·csrf·element plus·sql注入·商城实战
奔跑吧邓邓子22 天前
【商城实战(22)】商城性能优化秘籍:从前端到后端的实战攻略
redis·缓存·性能优化·springboot·uniapp·element plus·商城实战
惆怅客12323 天前
三维仿射变换矩阵
矩阵·旋转·仿射变换·缩放·平移