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
相关推荐
77美式1 天前
手机端键盘弹出导致页面抖动
前端·javascript·uniapp
咸虾米_4 天前
uni-id-pages解决自动管理token续期,以及token过期客户端自动跳转登录页面的功能
uniapp·unicloud·uni-id
阿凤2112 天前
后端返回文件二进制流
开发语言·前端·javascript·uniapp
阿凤2113 天前
后端返回数据流的格式
开发语言·前端·javascript·uniapp
绝世唐门三哥15 天前
uniapp系列-uniappp都有哪些生命周期?
vue.js·小程序·uniapp
宠友信息18 天前
社交软件源码哪个渠道好
java·微服务·架构·社交电子·springboot·uniapp
Fate_I_C18 天前
uniappx 鸿蒙运行包制作失败
华为·uni-app·uniapp·harmonyos
咸虾米_1 个月前
使用uniCloud阿里云服务空间的天塌了,云函数计费规则调整了
阿里云·云计算·uniapp·unicloud
蜡台1 个月前
SSE WebSocket Socket.IO 三者使用及区别
websocket·网络协议·uniapp·sse·socket.io·eventsource
路光.1 个月前
uniappVue2升级Vue3内存溢出解决方式
vue·vue3·uniapp