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
相关推荐
行走的鱼儿2 天前
Hbuilder X/Uniapp 关于app运行调试及mumu模拟器运行问题
uni-app·uniapp·hbuilderx·mumu·模拟器配置
漫天转悠5 天前
UniApp在Vue3下使用setup语法糖创建和使用自定义组件
vue.js·uniapp
h185385922447 天前
客运购票售票小程序校园巴士预约售票小程序开发方案php+uniapp
微信小程序·小程序·uni-app·php·uniapp·源码软件
苏世-顾长歌7 天前
解决背景图因为图片路径中携带括号导致图片无法显示的问题
微信小程序·uniapp
家里有只小肥猫9 天前
关于vue生命周期
uni-app·uniapp
Ares码农人生11 天前
vue.js组件和传值以及微信小程序组件和传值
vue.js·微信小程序·uniapp
秋田君12 天前
uni-app资源管理与图标使用全解
vue·uniapp
zhaoyapeng_14 天前
uniapp 小程序 周选择器
微信小程序·小程序·uni-app·uniapp
mosen86815 天前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
DK七七16 天前
当今陪玩系统小程序趋势,陪玩系统源码搭建后的适用于哪些平台
小程序·php·uniapp