Wechat mini program to take pictures
Realize taking pictures, switching cameras, picture previews, and taking pictures
first look at the effect
wxml
<!--调用相机拍照-->
<view class="page-container">
<view class='top'>
<view class='mask1 {
{ka? "ka" : "" }}'></view>
<view class='mask2 {
{ka? "ka" : "" }}'></view>
<camera class="camera" wx:if="{
{isAuth}}" device-position="{
{devicePosition}}" flash="off" binderror="error" />
</view>
<view class="line" />
<view class='bottom'>
<view class='item' bindtap="preview">
<image class='img' src="{
{src}}" mode="aspectFill" />
</view>
<view class='item'>
<view class='button' bindtap="takePhoto" hover-class="hover" hover-stop-propagation hover-start-time='0' hover-stay-time='200'> </view>
</view>
<view class='item' bindtap="change" mode="widthFix" hover-class="hover" hover-stop-propagation hover-start-time='0' hover-stay-time='200'>
<image class='shotCut' src="img/shotCut.svg" />
</view>
</view>
</view>
scss
/* pages/camera/camera.wxss */
.page-container {
height: 100vh;
width: 100vw;
background: #F4F4F4;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.top {
width: 100%;
flex: 1;
position: relative;
.camera {
width: 100%;
height: 100%;
}
@keyframes ka {
0% {
height: 0;
}
50% {
height: 50%;
}
100% {
height: 0%;
}
}
.mask1 {
position: absolute;
width: 100%;
height: 0%;
background-color: rgba($color: #000000, $alpha: 0.5);
z-index: 10;
&.ka {
animation: ka 0.2s;
}
}
.mask2 {
position: absolute;
width: 100%;
height: 0%;
background-color: rgba($color: #000000, $alpha: 0.5);
transform: rotate(180de);
bottom: 0;
z-index: 10;
&.ka {
animation: ka 0.2s;
}
}
}
.line {
background-color: #F4F4F4;
height: 1rpx;
width: 100%;
}
.bottom {
display: grid;
height: 300rpx;
width: 100%;
grid-template-columns: repeat(3, 1fr);
align-items: center; //垂直方向
background-color: white;
.item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
.img {
width: 120rpx;
height: 120rpx;
border: 1px solid #CDCDCD;
border-radius: 10rpx;
overflow: hidden;
}
&.hover {
.shotCut {
width: 80rpx;
height: 80rpx;
background-color: #F0F0F0;
border-radius: 10rpx;
}
}
.shotCut {
width: 80rpx;
height: 80rpx;
}
.button {
background-color: white;
width: 120rpx;
height: 120rpx;
justify-content: center;
align-items: center;
background-color: #CDCDCD;
border: 6px solid #e0e0e0;
border-radius: 60rpx;
box-sizing: border-box;
&.hover {
background-color: white;
}
}
}
}
}
ts
// pages/camera/camera.ts
Page({
/**
* 页面的初始数据
*/
data: {
isAuth: false,
src: '',
devicePosition: "back",
ka: false
},
//切换摄像头
change() {
let position = this.data.devicePosition === 'front' ? "back" : 'front';
this.setData({
devicePosition: position })
},
//预览
preview() {
wx.previewImage({
current: this.data.src,
urls: [this.data.src]
})
},
takePhoto() {
this.setData({
ka: true })
setTimeout(() => {
this.setData({
ka: false
})
}, 200);
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
let tempImagePath = res.tempImagePath
this.setData({
src: tempImagePath
})
//保存到本地相册
// wx.saveFile({
// tempFilePath: tempImagePath,
// success: function (res) {
// //返回保存时的临时路径 res.savedFilePath
// const savedFilePath = res.savedFilePath
// // 保存到本地相册
// wx.saveImageToPhotosAlbum({
// filePath: savedFilePath,
// success(res) {
// console.log("保存成功",res)
// },
// fail(res) {
// console.log("保存失败",res)
// }
// })
// },
// //保存失败回调（比如内存不足）
// fail: console.log
// })
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
const _this = this
wx.getSetting({
success: res => {
if (res.authSetting['scope.camera']) {
// 用户已经授权
_this.setData({
isAuth: true
})
} else {
// 用户还没有授权，向用户发起授权请求
wx.authorize({
scope: 'scope.camera',
success() {
// 用户同意授权
_this.setData({
isAuth: true
})
},
fail() {
// 用户不同意授权
_this.openSetting().then(res => {
_this.setData({
isAuth: true
})
})
}
})
}
},
fail: res => {
console.log('获取用户授权信息失败')
}
})
},
// 打开授权设置界面
openSetting() {
const _this = this
let promise = new Promise((resolve, reject) => {
wx.showModal({
title: '授权',
content: '请先授权获取摄像头权限',
success(res) {
if (res.confirm) {
wx.openSetting({
success(res) {
if (res.authSetting['scope.camera']) {
// 用户打开了授权开关
resolve(true)
} else {
// 用户没有打开授权开关， 继续打开设置页面
_this.openSetting().then(res => {
resolve(true)
})
}
},
fail(res) {
console.log(res)
}
})
} else if (res.cancel) {
_this.openSetting().then(res => {
resolve(true)
})
}
}
})
})
return promise;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},