首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,105 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,499 阅读
3
nps内网穿透实现外网访问树莓派
32,443 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,144 阅读
5
Typecho-Joe-Theme主题帮助文档
24,694 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
262
篇文章
累计收到
1,310
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
1
篇与
Camera
的结果
2022-08-23
微信小程序调用摄像头实现拍照功能
WXML文件代码<view class="content"> <view class="camera-con"> <camera wx:if="{{cameraStatus}}" device-position="back" flash="off" binderror="error"></camera> <van-image wx:if="{{!cameraStatus}}" width="100%" height="auto" src="{{src}}" fit="fill" /> </view> <view class="btn-con"> <van-button round color="#999999" size="small" bindtap="rePhoto">重新拍照</van-button> <van-button class="take" icon="stop-circle-o" color="rgba(0,0,0,0)" bindtap="takePhoto"></van-button> <van-button round color="#999999" size="small" bindtap="sendPhoto">提交图片</van-button> </view> </view>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年08月23日
1,603 阅读
0 评论
1 点赞