1.实现的效果
![](https://i-blog.csdnimg.cn/direct/a3d389f630a1498d9c69407b38daeca9.png)
![](https://i-blog.csdnimg.cn/direct/31d5db155244441d88b50f8bef92da25.png)
2.实现代码
(1)pages/index/index中
<template>
<view class="content">
<image class="logo" src="/static/header.jpg"></image>
<view class="text-area">
<button class="title" @click="goPhoto">拍照</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
goPhoto(){
uni.navigateTo({
url: '/pages/takephoto/takephoto'
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 300rpx;
width: 300rpx;
border-radius: 150rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
button{
width: 120px;
line-height: 62px;
font-size: 58rpx;
color: white;
background-color: green;
}
</style>
(2)pages/takephoto/takephoto中
<template>
<view>
<camera device-position="back" flash="off" :style="'width:100%;height:' + height+'px'">
</camera>
<view class="btn-box">
<button class="photo-btn" type="primary" @click="takePhoto">拍照</button>
<view class="perview-btn">
<image :src="src" style="width: 46px;height: 46px"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: "",
height: undefined,
}
},
onLoad(){
this.getSystemInfo()
},
methods: {
takePhoto() {
let that= this
const ctx = wx.createCameraContext()
console.log("ctx", ctx);
ctx.takePhoto({
quality: 'high',
success: (res) => {
console.log("res", res);
that.src= res.tempImagePath
}
})
}
}
</script>
<style>
.photo-btn{
width: 46px;
height: 46px;
border-radius: 46px;
margin-top: 10px;
}
.btn-box{
height: 66px;
display: flex;
position: relative;
}
.perview-btn{
width: 46px;
height: 46px;
border: 1px solid #000000;
opacity: 0.2;
position: absolute;
left: 10px;
top: 10px;
}
</style>