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
相关推荐
nbsaas-boot1 天前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
CJ点11 天前
FFmpeg命令全解析:三步完成视频合并、精准裁剪、英伟达显卡加速
ffmpeg·显卡·合并·amd·英伟达·裁剪
weixin_ab12 天前
实战记录:minapp框架下跨机型接口调用顺序引发的兼容性问题
uniapp·机型兼容性问题
菌菇汤14 天前
微信小程序传参过来了,但是数据没有获取到
微信小程序·小程序·uniapp
等风也在等着你14 天前
uniapp评价组件
uniapp
weixin_ab16 天前
Uniapp 中 onShow 与 onLoad 的执行时机解析
uniapp
满分观测网友z17 天前
CSS实现元素撑满剩余空间的5种方法
uniapp
~央千澈~1 个月前
UniApp X:鸿蒙原生开发的机会与DCloud的崛起之路·优雅草卓伊凡
uni-app·uniapp
MaCa .BaKa1 个月前
39-居住证管理系统(小程序)
java·vue.js·spring boot·mysql·小程序·maven·uniapp
佛系菜狗1 个月前
【菜狗work前端】小程序加if判断时不及时刷新 vs Web
微信小程序·uniapp·web