uni-app自定义摄像头拍照添加人物框
一、效果效果种包含相册选择，拍照，切换摄像头。
二、知识预备
需要用到uni的以下几个组件：
1、camera
地址：https://uniapp.dcloud.io/component/camera
2、cover-image
地址：https://uniapp.dcloud.io/component/cover-view?id=cover-image
三、思考和方法
思考
我实在新页面调用的摄像头拍照，那我拍了照片后怎么把数据带回原来的页面？
方法
vuex + onShow
四、代码
<template>
<view class="content" v-if="showHeader"
style="position: fixed;top: 0;left: 0;z-index: 777;width: 100%;height: 100vh;background-color: #FFFFFF;">
<camera :binderror="handleCameraError" :device-position="devicePosition" flash="off"
style="width: 100%; height: 80vh;">
<cover-image src="https://img-blog.csdnimg.cn/20210126152753150.png"
style="width: 100%;height: 700rpx;margin-top:100rpx;"></cover-image>
</camera>
<view class="btns" style="width: 100%;height: 20vh;background: #3B4144;">
<image class="item" @tap="chooseImage" src="../../static/write/photo.png"></image>
<image class="item" @tap="takePhotoByHead" src="../../static/write/camare.png"></image>
<image class="item" @tap="reverseCamera" src="../../static/write/change.png"></image>
</view>
<!-- <view class="error-handler" v-if="!authCamera">
<button class="nobtn" openType="openSetting">打开相机授权</button>
</view> -->
</view>
</template>
<script>
export default {
data() {
return {
authCamera: false,
showHeader: true,
ctxHeader: null,
devicePosition:'front'
}
},
watch:{
showHeader(val){
console.log(val)
return
var that = this;
//获取相机权限
uni.getSetting({
success(res) {
console.log('相机权限:', res)
if (res.authSetting["scope.camera"]) {
that.authCamera = true
} else {
that.authCamera = false
// uni.showModal({
//title: '权限申请',
//content: '需要摄像头权限，以拍摄照片。',
//success: (btn_res) => {
// if (btn_res.confirm) {
// uni.authorize({
// scope: 'scope.camera',
// success() {
// that.authCamera = true
// }
// })
// } else if (btn_res.cancel) {
// }
//}
// });
}
}
})
}
},
onShow() {
var that = this;
//获取相机权限
uni.getSetting({
success(res) {
console.log('相机权限:', res)
if (res.authSetting["scope.camera"]) {
that.authCamera = true
} else {
that.authCamera = false
// uni.showModal({
//title: '权限申请',
//content: '需要摄像头权限，以拍摄照片。',
//success: (btn_res) => {
// if (btn_res.confirm) {
// uni.authorize({
// scope: 'scope.camera',
// success() {
// that.authCamera = true
// }
// })
// } else if (btn_res.cancel) {
// }
//}
// });
}
}
})
},
onLoad() {
// console.log(window.innerHeight)
// if (uni.createCameraContext) {
//setTimeout(() => {
// this.cameraContext = uni.createCameraContext();
//}, 200)
// } else {
//// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
//uni.showModal({
// title: '提示',
// content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
//})
// }
},
methods: {
chooseImage(){
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: (res)=> {
this.newPath = res.tempFilePaths
console.log(this.newPath)
this.$store.commit('set_photo', this.newPath)
uni.navigateBack({
delta: 1
});
}
});
},
//拍摄头像
takePhotoByHead() {
this.showHeader = true //开启拍照
this.ctxHeader = uni.createCameraContext();
this.ctxHeader.takePhoto({
quality: 'high',
success: (res) => {
console.log(res)
uni.compressImage({
src: res.tempImagePath,
quality: 90, //压缩比例
success: ress => {
this.newPath = ress.tempFilePath; //图片
console.log(this.newPath)
this.$store.commit('set_photo', this.newPath)
uni.navigateBack({
delta: 1
});
}
})
}
});
},
handleCameraError() {
uni.showToast({
title: '用户拒绝使用摄像头',
icon: 'none'
})
},
reverseCamera() {
this.devicePosition = (("back" === this.devicePosition) ? "front" : "back")
},
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
// align-items: center;
justify-content: center;
background: #fff;
box-sizing: border-box;
height: 100%;
width: 100vw;
.btns {
display: flex;
justify-content: space-around;
align-items: center;
.item {
width: 100rpx;
height: 100rpx;
}
}
}
</style>以上为自定义拍照部分代码。
</div>
<div id="asideoffset"></div>
https://blog.51cto.com/u_12699853/4329437
页:
[1]