第20课 微信小程序实现相机拍照功能
效果图如下:
camera标签自动打开摄像头
camera标签详情: https://developers.weixin.qq.com/miniprogram/dev/component/camera.html
首先wxml代码:
<view>
<text>相机拍照功能</text>
<button class="photo" bindtap="takePhoto">点击拍照</button>
</view>
js代码:
takePhoto(){
wx.navigateTo({
url: '/pages/photo/photo', //跳转到自定义的一个拍照页面
})
},
pages/photo/photo页面内的代码如下:
wxml代码:
<camera
class="camera"
frame-size="large"
></camera>
<!-- frame-size="large"拍照图片高清 -->
<button class='record' bindtap='record'>拍摄</button>
js代码
相机方法的使用文档
https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.takePhoto.html
// 拍摄按钮按下, 执行record 触发拍摄
record(){
this.data.cameraContext = wx.createCameraContext()
this.data.cameraContext.takePhoto({
quality:"high", //高质量的图片
success: res => {
//res.tempImagePath照片文件在手机内的的临时路径
let tempImagePath = res.tempImagePath
wx.saveFile({
tempFilePath: tempImagePath,
success: function (res) {
//返回保存时的临时路径 res.savedFilePath
const savedFilePath = res.savedFilePath
// 保存到本地相册
wx.saveImageToPhotosAlbum({
filePath: savedFilePath,
})
},
//保存失败回调(比如内存不足)
fail: console.log
})
}
})
}
wxss代码:
/* pages/photo/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%;
}