第20课 微信小程序实现相机拍照功能

第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%;
}