微信小程序调用摄像头实现手机拍照的功能源码
25-04-07
slbcun
992℃
0
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; }