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
相关推荐
一只大菜鸟J4 天前
微信小程序使用ThreeX开发3d
微信小程序·uniapp·threex
leaf ...9 天前
uview中的utabs组件item字数不一致导致滑块偏移
开发语言·javascript·css·ecmascript·uniapp
JieZhongBa13 天前
微信小程序canvas2d频繁刷新图片时图片闪烁问题
前端·javascript·微信小程序·小程序·uniapp·canva可画
@gaoyanfeng14 天前
uView2.0 ScrollList 多菜单扩展
vue·uniapp
科学的发展-只不过是读大自然写的代码14 天前
qt 简单实验 一个可以向右侧拖拽缩放的矩形
qt·拖拽·简单实验·缩放
JieZhongBa15 天前
微信小程序canvas拖动卡顿问题解决方法
vue.js·微信小程序·uniapp·canvas
偷吃零食的小猫咪16 天前
Antd - 上传图片 & 裁剪图片
前端·上传文件·裁剪
applebomb1 个月前
uniapp小程序多线程 Worker 实战【2024】
小程序·uniapp·worker·unibest·异步线程
苏生Susheng1 个月前
【uniapp】uniapp页面介绍
java·前端·微信小程序·小程序·uni-app·vue·uniapp
肥仔哥哥19301 个月前
webstorm新建vue项目相关问题
vue.js·uniapp·intellij idea·webstorm·webstrom+uniapp