一、微信小程序調(diào)用攝像頭實現(xiàn)拍照功能
微信小程序開發(fā)文檔
首先，需要用戶授權(quán)攝像頭權(quán)限，這一步是必須的
具體步驟：
1、獲取用戶當前授權(quán)狀態(tài)，看是否已經(jīng)授權(quán)，如果已經(jīng)授權(quán)直接顯示攝像頭
2、如果用戶還沒有授權(quán)，則調(diào)起授權(quán)彈框，用戶允許授權(quán)則顯示攝像頭
3、如果用戶不允許，則提示用戶去設(shè)置頁面打開攝像頭權(quán)限
用戶授權(quán)之后，就可以進行拍攝了，微信的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>
wsss:
.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']) {
// 用戶已經(jīng)授權(quán)
_this.setData({
isAuth: true
})
} else {
// 用戶還沒有授權(quán)，向用戶發(fā)起授權(quán)請求
wx.authorize({
scope: 'scope.camera',
success() { // 用戶同意授權(quán)
_this.setData({
isAuth: true
})
},
fail() { // 用戶不同意授權(quán)
_this.openSetting().then(res => {
_this.setData({
isAuth: true
})
})
}
})
}
},
fail: res => {
console.log('獲取用戶授權(quán)信息失敗')
}
})
},
// 打開授權(quán)設(shè)置界面
openSetting() {
const _this = this
let promise = new Promise((resolve, reject) => {
wx.showModal({
title: '授權(quán)',
content: '請先授權(quán)獲取攝像頭權(quán)限',
success(res) {
if (res.confirm) {
wx.openSetting({
success(res) {
if (res.authSetting['scope.camera']) { // 用戶打開了授權(quán)開關(guān)
resolve(true)
} else { // 用戶沒有打開授權(quán)開關(guān)， 繼續(xù)打開設(shè)置頁面
_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] // 需要預(yù)覽的圖片http鏈接列表
})
}
})
}
})
二、微信小程序?qū)崿F(xiàn)圖片上傳
微信小程序?qū)崿F(xiàn)圖片上傳
首先是靜態(tài)布局和樣式部分
.wxml：
<view class='load-img'>
<view class='load-box'>
<view class='img-item' wx:for="{{fileList}}" wx:key="index" >
<image src="{{item.path}}" data-src="{{item}}" mode="aspectFill" data-list="{{fileList}}" bindtap=""></image>
<icon class='icon' type="clear" size="20" color='#EF4444' catchtap='_onDelTab' data-idx="{{index}}" wx:if="{{!prevent}}"/>
</view>
<image class='img-add' bindtap='_addImg' wx:if="{{!prevent}}"></image>
</view>
</view>
.wxss:
/* 上傳圖片 */
.load-name {
height: 80rpx;
line-height: 80rpx;
font-size: 30rpx;
}
.load-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.img-item, .img-add {
position: relative;
width: 140rpx;
height: 140rpx;
margin: 20rpx;
}
.img-add {
border: 1px solid #ccc;
}
.img-add:after{
width: 1rpx;
height: 50rpx;
content: " ";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #ccc;
}
.img-add:before{
position: absolute;
top: 50%;
right: 31%;
width: 50rpx;
height: 1rpx;
content: " ";
display: inline-block;
background-color: #ccc;
}
.img-item {
margin-right: 20rpx;
}
.img-item image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.icon {
position: absolute;
top: 0;
right: 0;
}
以上這些基本代碼就可以完成圖片上傳，顯示，刪除等樣式布局
下面是js的部分，我已詳細備注～～～
先來看下完整的代碼
/**
* 小程序圖片上傳
* 組件接受參數(shù)
* fileList 圖片數(shù)組
* prevent 控制是否可新增
* 方法
* bindimageChange 選擇圖片后觸發(fā)
* bindimageDel 刪除圖片后觸發(fā)
*
*/
const app = getApp();
Component({
properties: {
fileList: {
type: Array
},
prevent: {
type: Boolean,
value: false
}
},
data: {
fileList: []
},
ready() {},
methods: {
// 點擊加號進入手機相冊，并進行圖片選擇
_addImg() {
let _this = this;
// 此方法為微信小程序自帶api 詳情訪問https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
wx.chooseImage({
count: 5,
success(res) {
//此處會返回圖片暫存路徑和文件大小
const data = res.tempFiles;
_this.setFile(data)
}
})
},
setFile (data) {
// 將wx.chooseImage返回的數(shù)據(jù)進行擴展
data.map((item, index) => {
// 通過路徑截取文件后綴名
const fileFormat = item.path.substring(item.path.lastIndexOf(".") + 1, item.path.length);
// wx.getFileSystemManager()小程序文件管理器api，可以將通過文件路徑將其轉(zhuǎn)換成64編碼
const fileManager = wx.getFileSystemManager();
const base64 = fileManager.readFileSync(item.path, 'base64');
item.fileContent = base64;
item.fileSize = item.size;
// 通過時間獲取隨機13位隨機數(shù)并且拼接文件后綴進行文件命名
item.fileName = this.getFileName(13) + '.' + fileFormat;
// 此處操作是用來進行選中圖片顯示的，只有這樣拼接才能顯示base64編碼的路徑
item.path = `data:image/${fileFormat};base64,${base64}`;;
})
this.setData({
fileList: this.data.fileList.concat(data)
});
// 此處操作是用來將獲取到的文件數(shù)據(jù)傳遞給父組件進行文件上傳
this.triggerEvent('imageChange', this.data.fileList)
},
// 隨機生成文件名
getFileName (m) {
m = m > 13 ? 13 : m;
var num = new Date().getTime();
return num.toString().substring(13 - m);
},
點擊進行圖片刪除
_onDelTab(e) {
// 獲取圖片索引
let idx = e.currentTarget.dataset.idx;
let delFile = this.data.fileList[idx];
console.log(delFile);
this.data.fileList.splice(idx, 1);
this.setData({
fileList: this.data.fileList
})
this.triggerEvent('imageDel', delFile);
}
})
代碼里對代碼的備注已經(jīng)很明確了，大家仔細扒一下，根據(jù)的自己的項目進行相應(yīng)的調(diào)整，基本上都是沒問題的，不要直接直接粘貼不復(fù)置，我是直接在我的項目中直接拿過來的代碼，直接粘貼復(fù)制肯定是不行的?。?！
需要注意的是這里
image.png
通常在真機上點擊選中圖片后wx.chooseImage方法中返回的文件路徑是wxfile:開頭的路徑，這樣的路徑想直接轉(zhuǎn)成base64，上面的方式是可以實現(xiàn)的，我也是查了很多資料才找到的解決辦法。
再一個需要注意的是image src屬性想顯示base64格式的圖片要進行字符串拼接才可以正常顯示如下圖
image.png
