<template>
<view>
<view class="outer">
<camera :device-position="back" flash="off" @error="error" style="width: 100%; height: 100vh;"></camera>
<view class="confirm flex" :style="{'padding-bottom': isIphone ? '140rpx' : '100rpx' }">
<u-icon name="camera" color="#fff" size="30"></u-icon>
<image class="take" src="../../../static/images/take.png" mode="" @click="takePhoto"></image>
<u-icon name="reload" color="#fff" size="30" @click="takeback"></u-icon>
</view>
<u-overlay :show="show" opacity="1"></u-overlay>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show:false,
isIphone:'',
back:'back'
};
},
onLoad() {
this.isIphone = uni.getStorageSync('modelmes')
},
methods: {
takePhoto() {
const ctx = uni.createCameraContext();
ctx.takePhoto({
quality: 'high',
success: (res) => {
console.log(res);
this.show = true
setTimeout(e=>{
this.show = false
},300)
}
});
},
takeback(){
this.back == 'back' ? this.back = 'front' : this.back = 'back'
},
error(e) {
console.log(e.detail);
}
}
}
</script>
<style lang="less">
.outer{
position: relative;
height: 100vh;
}
.confirm{
background: rgba(0, 0, 0, 0.9);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding:100rpx 40rpx;
box-sizing: border-box;
.take{
width: 120rpx;
height: 120rpx;
}
}
</style>
uniapp简单实现自定义相机功能
最新推荐文章于 2024-07-14 18:54:15 发布