完善功能
This commit is contained in:
wangxiaowei
164
uni_modules/hao-camera/components/hao-camera/hao-camera.vue
Normal file
164
uni_modules/hao-camera/components/hao-camera/hao-camera.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<view class="content"
|
||||
style="position: fixed;top: 0;left: 0;z-index: 777;width: 100%;height: 100vh;background-color: #FFFFFF;">
|
||||
<camera @error="handleCameraError" :device-position="localDevicePosition" flash="off" v-if="!cameraImage"
|
||||
style="width: 100%; height: 100vh;">
|
||||
<cover-image src="@/uni_modules/hao-camera/static/person.png"
|
||||
style="width: 100vw; height: 770rpx; margin:10vh 0vw 0 0vw;"></cover-image>
|
||||
<view
|
||||
style="top: 20rpx;left: 40rpx;width: 380rpx;position: fixed;height: 202rpx; border-radius: 20rpx;border: 1px solid rgba(51, 51, 51,0.6);background-color: rgba(51, 51, 51,0.6);">
|
||||
</view>
|
||||
<view
|
||||
style="top: 20rpx;left: 40rpx;width: 380rpx;position: fixed;height: 202rpx; border-radius: 20rpx;font-size: 26rpx;color: white;display: flex;flex-direction: column;box-sizing: border-box;padding:25rpx;">
|
||||
<text>1. 保持光线充足</text>
|
||||
<text style="margin-top: 20rpx;">2. 人物轮廓清晰无阴影</text>
|
||||
<text style="margin-top: 20rpx;">3. 姿势端正，眼睛直视镜头</text>
|
||||
</view>
|
||||
|
||||
<!-- 准备拍照 -->
|
||||
<view v-if="!cameraImage" class="btns"
|
||||
style="width: 100%;height: 16vh;background-color: rgba(51, 51, 51, 0.5); padding-bottom: 25rpx;position: fixed;bottom: 0;">
|
||||
<!-- <image class="item" @tap="chooseImage" src="@/uni_modules/hao-camera/static/xiangce.png"></image> -->
|
||||
<image class="item_center" @tap="takePhotoByHead" src="@/uni_modules/hao-camera/static/cameraImg.png">
|
||||
</image>
|
||||
<image class="item" @tap="reverseCamera" src="@/uni_modules/hao-camera/static/fanzhuan.png"></image>
|
||||
</view>
|
||||
</camera>
|
||||
<!-- 确认拍照照片 -->
|
||||
<image v-if="cameraImage" :src="cameraImage" style="width: 100%; height: 100vh;" mode="aspectFit"></image>
|
||||
|
||||
<!-- 拍照完成 -->
|
||||
<view v-if="cameraImage" class="btns"
|
||||
style="width: 100%;height: 16vh;background-color: rgba(51, 51, 51, 0.5); padding-bottom: 25rpx;position: fixed;bottom: 0;">
|
||||
<image class="img_btn" @tap="cameraImage = ''" src="@/uni_modules/hao-camera/static/back.png"></image>
|
||||
<image class="img_btn"></image>
|
||||
<image class="img_btn" @tap="confirmPhoto" src="@/uni_modules/hao-camera/static/confirm.png"></image>
|
||||
</view>
|
||||
<view class="error-handler" v-if="!authCamera">
|
||||
<button class="nobtn" openType="openSetting">获取相机权限失败</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
quality: {
|
||||
type: String,
|
||||
default: 'high'
|
||||
},
|
||||
devicePosition: {
|
||||
type: String,
|
||||
default: 'back'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ctxHeader: null,
|
||||
cameraImage: '',
|
||||
authCamera: true,
|
||||
localDevicePosition: this.devicePosition
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
devicePosition(newVal) {
|
||||
this.localDevicePosition = newVal;
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.checkCameraAuth();
|
||||
// #endif
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.checkCameraAuth();
|
||||
// #endif
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkCameraAuth() {
|
||||
uni.getSetting({
|
||||
success: (res) => {
|
||||
if (res.authSetting["scope.camera"]) {
|
||||
this.authCamera = true;
|
||||
} else {
|
||||
this.authCamera = false;
|
||||
uni.showToast({
|
||||
title: '请确认是否允许获取您的相机权限！',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// ...existing code...
|
||||
//拍摄头像
|
||||
takePhotoByHead() {
|
||||
this.ctxHeader = uni.createCameraContext();
|
||||
this.ctxHeader.takePhoto({
|
||||
// quality: this.quality,
|
||||
quality: 'low',
|
||||
success: (res) => {
|
||||
this.cameraImage = res.tempImagePath; //图片
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '拍照失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
handleCameraError() {
|
||||
uni.showToast({
|
||||
title: '用户拒绝使用摄像头',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
reverseCamera() {
|
||||
this.localDevicePosition = (("back" === this.localDevicePosition) ? "front" : "back")
|
||||
console.log("🚀 ~ localDevicePosition:", this.localDevicePosition)
|
||||
},
|
||||
confirmPhoto() {
|
||||
this.$emit('confirmPhoto', this.cameraImage)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.img_btn {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.item_center {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user