index.wxml页面
<view class="userinfo">
<text>相机拍照功能</text>
<button class="photo" bindtap="takePhoto">点击拍照</button>
</view>
index.js页面
takePhoto(){
wx.navigateTo({
url: '/pages/photo/photo', //跳转到自定义的一个拍照页面
})
},
photo.wxml页面
<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({
/**
* 页面的初始数据
*/
data: {
image:''
},
takePhoto:function(){
var _this=this
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
console.log("拍照");
this.setData({
src: res.tempImagePath
})
wx.setStorage({
key: 'key1',
data: this.data.src,
success: function (res) {
console.log('异步保存成功')
}
}),
wx.getStorage({
key: 'key1',
success: function (res) {
_this.setData({image:res.data})
console.log(res.data)
}
})
}
})
}
})
photo.wxss页面
.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
}