1、相机组件
- 页面引入相机 (camera.wxml)
<!-- 相机 -->
<camera wx:if="{
{showCamera}}" device-position="{
{cameraConfig.position}}" flash="{
{cameraConfig.flash}}" bindstop="cameraStop" binderror="cameraError" class="cameraBox">
<cover-view class="viewBox">
<cover-view style='background-color: #fff;flex:1;'></cover-view>
<cover-view class="content">
<cover-image mode='widthFix' class="faceImg" src="/icon/face.png" />
<cover-view class="circle"></cover-view>
</cover-view>
<cover-view style='background-color: #fff;flex:1;'></cover-view>
</cover-view>
<cover-view class="cameraTab">
<cover-image class="tabImg" src="/icon/{
{cameraConfig.flash}}.png" bindtap='flashChange'></cover-image>
<cover-image class="tabImg" src="/icon/switch.png" bindtap='positionChange'></cover-image>
<cover-view bindtap='cameraDisable'>取消</cover-view>
</cover-view>
<cover-view class="photographBtn" bindtap='takePhoto'>
<cover-image class="cameraImg" src="/icon/camera.png"></cover-image>
</cover-view>
</camera>
const userAPI = require('../../model/user')
const mimeMap = require('../../utils/mime')
Component({
properties: {
img_type: {
type: String,
value: 'images/'
}
},
data: {
showCamera: false, // 显示相机
cameraConfig: {
position: 'front',
flash: 'off'
},
},
created() {
// 初始化
this.showCamera = false //是否显示照相机
this.cameraConfig = { //照相机参数配置
flash: 'off',
position: 'front'
}
},
methods: {
uploadFile(filePath, data) { // 移动云获取签名, 非必要, 与后端沟通需求
const host = 'https://...';
wx.uploadFile({
url: host,
filePath: filePath,
name: 'file',
formData: {
'key': data.key,
'acl': data.acl,
'Content-Type': data.contentType,
'X-Amz-Credential': data.x_amz_credential,
'X-Amz-Algorithm': data.x_amz_algorithm,
'X-Amz-Date': data.x_amz_date,
'Policy': data.policy,
'X-Amz-Signature': data.x_amz_signature
},
success: (res) => {
// console.log('uploadFile', res);
if (res.statusCode === 204) {
wx.showToast({
title: '上传成功!',
icon: 'none',
});
userAPI.fileUrl(data.key).then(result => {
// 向父组件传递数据
this.triggerEvent('takePhoto', {
href: result,
upHref: data.key,
})
})
}
},
fail: err => {
console.log(err);
}
});
},
// 调用相机
cameraDisable() {
let self = this;
self.showCamera = !self.showCamera;
self.setData({
showCamera: self.showCamera
})
},
// 拍照
takePhoto(e) {
var self = this;
wx.showLoading({
title: '上传中...',
})
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'normal',
success: res => {
console.log(res)
let extension = res.tempImagePath.split('.')[1];
self.cameraDisable();
let signParams = {
key: 'face/' + res.tempImagePath.split('\/\/')[1], // 处理文件路径, 与后端沟通
acl: 'private',
content_type: mimeMap.getMimeType(extension)
}
// 图片加密, 非必要, 与后端沟通要求
userAPI.sign(signParams).then(result => {
// console.log(result);
self.uploadFile(res.tempImagePath, result)
}).catch(err => {
console.log(err);
})
}
})
},
// 照相机停止运行
cameraStop: function (e) {
this.cameraDisable();
app.showNone('相机停止运行')
},
// 照相机没授权
cameraError: function (e) {
var self = this;
self.setData({
showCamera: false
})
wx.getSetting({
success: (res) => {
if (res.authSetting['scope.camera'] == false) {
wx.showModal({
title: '摄像头授权',
content: '您未开启相机权限,无法上传照片,是否开启',
cancelText: '取消',
confirmText: '开启',
success: (res) => {
if (res.confirm) {
wx.openSetting({
success: res => {
this.cameraDisable(); // 开启相机
}
})
} else if (res.cancel) {
wx.showToast({
icon: "none",
title: '您未开启相机权限,无法上传照片,需要开启相机权限',
duration: 4000,
})
}
}
})
}
}
})
},
// 切换闪光灯状态
flashChange: function () {
switch (this.cameraConfig.flash) {
case 'off':
this.cameraConfig.flash = 'on';
break;
case 'on':
this.cameraConfig.flash = 'auto';
break;
case 'auto':
this.cameraConfig.flash = 'off';
break;
}
this.setData({
cameraConfig: this.cameraConfig
})
console.log('切换闪光灯状态');
},
// 切换前后置摄像头
positionChange() {
switch (this.cameraConfig.position) {
case 'front':
this.cameraConfig.position = 'back';
break;
case 'back':
this.cameraConfig.position = 'front';
break;
}
this.setData({
cameraConfig: this.cameraConfig
})
console.log('切换前后置摄像头');
}
}
})
- 页面样式
/* 照相机 */
.cameraBox {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 10000;
}
.viewBox {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
display: flex;
align-items: stretch;
flex-direction: column;
}
/* 顶部设置导航 */
.cameraTab {
position: fixed;
left: 0;
top: 0;
width: 94vw;
height: 12vw;
padding: 0 3vw;
background-color: rgba(0, 0, 0, .8);
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 32rpx;
color: #fff;
}
.cameraTab .tabImg {
width: 7vw;
height: 7vw;
}
.content {
width: 100vw;
height: 100vw;
position: relative;
}
/* 相机遮罩图片 */
.faceImg {
width: 100vw;
height: 100vw;
padding: 0;
margin: 0;
}
/* 圆圈 */
.circle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 80vw;
border-radius: 50%;
border: 10rpx solid #ccc;
}
/* 拍照按钮 */
.photographBtn {
position: fixed;
bottom: 10vw;
left: 0;
right: 0;
margin: auto;
z-index: 10000;
width: 120rpx;
height: 120rpx;
padding: 0;
border-radius: 50%;
background-color: red;
border: 10rpx solid #eee;
display: flex;
align-items: center;
justify-content: center;
}
.photographBtn .cameraImg {
width: 70rpx;
height: 70rpx;
}
- 组件配置
{
"component": true, // 设置为true
}
2、使用相机
<!-- 相机 -->
<component-camera id="camera" wx:if="{
{showCamera}}" bindtakePhoto="takePhoto"></component-camera>
// 调用相机
useCamera() {
this.setData({
showCamera: true
})
this.selectComponent("#camera").cameraDisable();
},
takePhoto(e) {
var href = "userInfo.href";
this.setData({
[href]: e.detail.href,
upHref: e.detail.upHref
})
},
{
"usingComponents": {
"component-camera": "/components/camera/camera", // 注册组件
}
}