微信小程序調用攝像頭實現拍照功能
本文實例為大傢分享瞭微信小程序調用攝像頭實現拍照的具體代碼，供大傢參考，具體內容如下
微信小程序開發文檔
首先，需要用戶授權攝像頭權限，這一步是必須的
具體步驟：
1、獲取用戶當前授權狀態，看是否已經授權，如果已經授權直接顯示攝像頭
2、如果用戶還沒有授權，則調起授權彈框，用戶允許授權則顯示攝像頭
3、如果用戶不允許，則提示用戶去設置頁面打開攝像頭權限
用戶授權之後，就可以進行拍攝瞭，微信的camera組件無法顯示為圓形，我這裡是用一張圖片遮蓋瞭
上代碼：
wxml：
<view class='camera'>
<image src="/images/border.png" mode="widthFix"></image>
<camera wx:if="{{isAuth}}" device-position="back" flash="off" binderror="error"></camera>
</view>
<button class="takePhoto" type="primary" bindtap="takePhoto">拍照</button>
wxss:
.camera {
width: 430rpx;
height: 430rpx;
border-radius: 50%;
margin: 20px auto 0;
position: relative;
}
.camera image {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
}
.camera camera {
width: 428rpx;
height: 428rpx;
}
button.takePhoto:not([size='mini']) {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 90rpx;
border-radius: 0;
}
js:
Page({
data: {
isAuth: false,
src: ''
},
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;
},
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
wx.previewImage({
current: res.tempImagePath, // 當前顯示圖片的http鏈接
urls: [res.tempImagePath] // 需要預覽的圖片http鏈接列表
})
}
})
}
})
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。