index.wxml page
<view class="userinfo">
<Text> your camera function </ text>
<button class="photo" bindtap="takePhoto">点击拍照</button>
</view>
index.js page
takePhoto(){
wx.navigateTo({
url: '/ pages / photo / photo', // jump to a custom page pictures
})
},
photo.wxml page
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 1100rpx;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<image class="img" src="{{image}}"></image>
photo.js page
Page({
/**
* Initial data page
*/
data: {
image:''
},
takePhoto:function(){
var _this=this
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
console.log ( "pictures");
this.setData({
src: res.tempImagePath
})
wx.setStorage({
key: 'key1',
data: this.data.src,
success: function (res) {
console.log ( 'asynchronous successfully saved')
}
}),
wx.getStorage({
key: 'key1',
success: function (res) {
_this.setData({image:res.data})
console.log(res.data)
}
})
}
})
}
})
photo.wxss page
.camera{
width: 100vw;
height: 100vh;
}
.record{
position: fixed;
bottom: 10rpx;
left: 0;
right: 0;
width: 120rpx;
height: 120rpx;
margin: auto;
border-radius: 50%;
}
.img{
width:100%;
height:300px;
position: absolute;
bottom:0;
top:500px
}