自定义相机插件(组件版、缩放、裁剪) Ba-CameraView
简介(下载地址)
Ba-CameraView 是一款自定义相机拍照组件,支持任意界面,支持裁剪
- 支持任意自定义界面
- 支持手势缩放
- 支持裁剪(手势拖动、比例设置、旋转)
- 支持自定义保存路径
截图地址
也可关注博客,实时更新最新插件:
使用方法(示例)
在 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 |