微信小程序调用摄像头实现拍照功能
2023-06-13 09:11:02 时间
WXML文件代码
重新拍照
提交图片
JS文件代码
Page({
data: {
cameraStatus: false,
src: '',
},
onLoad() {
const _this = this
wx.getSetting({
success: res => {
if (res.authSetting['scope.camera']) {
_this.setData({
cameraStatus: true
})
} else {
// 用户还没有授权,向用户发起授权请求
wx.authorize({
scope: 'scope.camera',
success() { // 用户同意授权
_this.setData({
cameraStatus: true
})
},
fail() { // 用户不同意授权
_this.openSetting().then(res => {
_this.setData({
cameraStatus: 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;
},
// 拍照
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath,
cameraStatus: false
})
}
})
},
// 重新拍照
rePhoto() {
this.setData({
cameraStatus: true,
src: ''
})
}
})
WXSS文件代码
.content {
padding: 0;
margin: 0;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: space-between;
overflow: hidden;
height: 100vh;
}
image {
margin: 0;
padding: 0;
}
.content .camera-con {
flex: 1;
overflow: hidden;
}
.content .camera-con image,
.content .camera-con camera {
width: 100%;
height: calc(100vh - 148rpx);
}
.content .btn-con {
display: flex;
justify-content: space-between;
align-items: center;
height: 148rpx;
background-color: #333333;
}
.content .btn-con button {
margin: 0 30rpx;
}
.content .btn-con .take {
border: 2rpx solid #FFFFFF;
border-radius: 50%;
height: 93rpx;
width: 93rpx;
display: flex;
align-items: center;
justify-content: center;
}
相关文章
- 【愚公系列】2022年09月 微信小程序-电商项目-商品列表也功能实现(待写勿看)
- 【愚公系列】2022年09月 微信小程序-自定义tabBar的实现
- 微信小程序即时聊天对话窗口静态源码[通俗易懂]
- 微信小程序轮播图实现详解
- 三分钟实现微信小程序轮播图「建议收藏」
- 微信小程序(逻辑层的全部知识点)保姆级讲解
- 【说站】幸运红包娱乐微信小程序源码 多玩法安装简单
- 【说站】强大新UI装逼神器微信小程序源码+多模板支持多种流量主模式
- 【说站】文案微信小程序源码独立版+前端
- 【愚公系列】2022年09月 微信小程序-three.js绘制正方体
- 怎么开发一个简单的小程序_微信小程序编写教程
- 小程序uv访客怎么刷_微信小程序获取访客数据-使用攻略
- wine卡住_Ubuntu微信
- 【愚公系列】2022年10月 微信小程序-电商项目-使用vtabs实现商品列表页
- 基于SSM实现仿知乎微信小程序分享
- 【愚公系列】2022年10月 微信小程序-电商项目-确认订单功能实现
- 【愚公系列】2022年10月 微信小程序-电商项目-微信支付小程序内部API功能实现
- 微信小程序云开发实现图片的上传、存储、访问
- 什么是大前端技术?微信小程序用户占比达25%
- 彩虹云商城QQ微信快捷登录设置教程,附QQ互联分发api平台地址
- 如何实现自有App上的小程序第三方微信授权登陆?
- 《吐血整理》高级系列教程-吃透Fiddler抓包教程(35)-Fiddler如何抓取微信小程序的包-下篇
- 微信小程序:全局配置app.json详解编程语言
- 新型微信小程序借助Redis缓存实现极致性能(微信小程序redis缓存)