微信小程序實現自定義拍攝組件
微信小程序實現自定義攝像頭（在攝像頭內添加提示信息），供大傢參考，具體內容如下
攝像頭組件（wxml）
<!-- 拍照功能 自定義攝像頭
bindtap：takePhotoDepot----從圖庫獲取
bindtap：takePhoto----拍照
bindtap：takeFrontBack---轉換攝像頭
-->
<view wx:if="{{useCameraTakePhoto}}" class="scan_view">
<!-- 攝像頭組件 -->
<camera device-position="back" mode="normal" flash="off" binderror="error" device-position="{{phopo_camera?'front':'back'}}" style="width: 100%; height: 100vh;">
<!-- 攝像頭返回按鈕 -->
<cover-view class="camera_view">
<cover-view class="back" bindtap="closeCamera">
返回
</cover-view>
<cover-view style="overflow: hidden;margin-top: 80vh;">
<cover-image bindtap="takePhotoDepot" class="take_photo_depot"src="../../images/phopo.png"></cover-image>
<cover-image bindtap="takePhoto" class="take_photo" src="../../images/starCamera.png"></cover-image>
<cover-image bindtap="takeFrontBack" class="take_photo_frontBack" src="../../images/transition.png"></cover-image>
</cover-view>
</cover-view>
</camera>
</view>
喚醒攝像頭組件（wxml）
<view class="conPhopo_camera" bindtap="changePhoto"> <text>拍攝照片</text> </view>
自定義展示拍照後的圖片（wxml）
<view style="width:100%; overflow: hidden;" wx:if="{{tempFileList.length>0}}">
<!-- 圖片縮小狀態 -->
<view style="position: relative;width: 80rpx;height: 120rpx;float: left;margin-right: 10rpx; margin-top: 10rpx;" wx:for="{{tempFileList}}" wx:key="index">
<view class="fileShow" wx:if="{{item.type ==='image' && item.thumb}}">
<image style="display: inline-block;width: 80rpx;height: 120rpx; " src="data:image/png;base64,{{item.thumb}}" alt="" bindtap="changeMinImage" data-item="{{item}}" data-index="{{index}}" data-src='{{item.thumb}}' data-thumb='true' />
</view>
<view class="fileShow" wx:elif="{{item.type ==='image' &&item.path}}">
<image style="display: inline-block;width: 80rpx;height: 120rpx; margin-top: 10rpx;" src="{{item.path}}" alt="" bindtap="changeMinImage" data-item="{{item}}" data-index="{{index}}" data-src='{{item.path}}' />
</view>
</view>
<!-- 點擊縮小圖片放大展示-->
<view wx:if="{{isSrc}}" style="position: absolute;left:0;top: 0; width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.8);padding-top: 20%;">
<view wx:if="{{thumb=='true'}}">
<image style="display: block; width: 80%;height: 80%;margin: 0 auto;opacity: 1; background-color: #09ce9a;" src="data:image/png;base64,{{src.src}}" alt="" />
</view>
<view wx:elif="{{thumb!='true'}}">
<image style="display: block; width: 80%;height: 80%;margin: 0 auto;opacity: 1; background-color: aqua;" src="{{src.src}}" />
</view>
<i class="iconfont .icon-quxiao" bindtap="changeMaxImage" style="position: absolute;left: 20rpx;top: 20rpx;color: #fff;font-size: 44rpx;"></i>
</view>
</view>
接下來就是關鍵瞭，主要還得看js怎麼實現
實現的方法
打開攝像頭並且拍照
// 控制攝像頭是否顯示
changePhoto(e) {
const {
currentTab,
isVideoModel,
} = this.data;
let casePhotoList = this.data.casePhotoList;
let facePhotoList = this.data.facePhotoList;
let abnormalPhotoList = this.data.abnormalPhotoList;
let accessoryPhotoList = this.data.accessoryPhotoList;
const that = this;
if (currentTab == 2) {
// 攝像開始
wx.chooseVideo({
count: 1,
mediaType: ['video'],
sourceType: ['camera'],
success: (res) => {
// 添加formData
let formData = new FormData();
formData.append('type', currentTab);
let src = {
tempVideoPath: res.tempFilePath,
size: res.size
};
abnormalPhotoList.push(src);
that.setData({
abnormalPhotoList: abnormalPhotoList,
useCameraTakePhoto: false,
isVideoModel: !isVideoModel,
});
for (const iterator of abnormalPhotoList) {
formData.appendFile('files[]', iterator.tempVideoPath);
}
let tempFilesPath = abnormalPhotoList.map(item => ({
type: item.type ? item.type : 'video', // 文件類型
path: item.tempVideoPath, // 文件本地路徑
size: item.size ? item.size : '', // 文件大小
}))
let {
videoTempFileList
} = that.data;
that.setData({
videoTempFileList: videoTempFileList.concat(tempFilesPath)
})
let data = formData.getData();
// 2.2.異步上傳，發送請求 這裡就不寫瞭
...
}
})
} else {
this.setData({
useCameraTakePhoto: true,
isjustSrc: e.currentTarget.dataset.isphoto
})
// 拍照開始
wx.chooseMedia({
success: res => {
let newTempFiles = {
tempImagePath:res.tempFiles[0].tempFilePath,
type:res.tempFiles[0].fileType,
size:res.tempFiles[0].size
}
let formData = new FormData();
formData.append('type', currentTab);
if (currentTab == 0) {
casePhotoList.push(res.tempFiles[0])
that.setData({
casePhotoList: casePhotoList,
useCameraTakePhoto: false
})
for (const iterator of newTempFiles) {
console.log(newTempFiles,244);
formData.appendFile('files[]', newTempFiles.tempImagePath);
}
// 2.選擇文件後，頁面顯示選擇的文件的本地臨時文件，且進行異步上傳
// 2.1.返回選定文件的本地文件路徑列表，可以作為img標簽的src屬性顯示圖片
let tempFilesPath = casePhotoList.map(item => ({
type: newTempFiles.fileType ? newTempFiles.fileType : 'image', // 文件類型
path: newTempFiles.tempImagePath, // 文件本地路徑
size: newTempFiles.size ? newTempFiles.size : '', // 文件大小
}))
let {
tempFileList
} = that.data;
console.log(tempFileList,257);
that.setData({
tempFileList: tempFileList.concat(newTempFiles)
},()=>{console.log(that.data);})
} else if (currentTab == 1) {
facePhotoList.push(...newTempFiles)
that.setData({
facePhotoList: facePhotoList,
useCameraTakePhoto: false
})
for (const iterator of [...newTempFiles]) {
formData.appendFile('files[]', iterator.tempImagePath);
}
let tempFilesPath = facePhotoList.map(item => ({
type: item.type ? item.type : 'image', // 文件類型
path: item.tempImagePath, // 文件本地路徑
size: item.size ? item.size : '', // 文件大小
}))
let {
facetTempFileList
} = that.data;
that.setData({
facetTempFileList: facetTempFileList.concat(tempFilesPath)
})
} else if (currentTab == 3) {
accessoryPhotoList.push(...newTempFiles)
that.setData({
accessoryPhotoList: accessoryPhotoList,
useCameraTakePhoto: false
})
for (const iterator of accessoryPhotoList) {
formData.appendFile('files[]', iterator.tempImagePath);
}
}
let data = formData.getData();
// 2.2.異步上傳，發送請求 上傳照片
}
})
}
},
轉換攝像頭
// 轉換攝像頭
takeFrontBack() {
const {
phopo_camera
} = this.data
this.setData({
phopo_camera: !phopo_camera
})
},
打開手機相冊
// 打開手機相冊
takePhotoDepot() {
const that = this;
const {
currentTab,
} = this.data;
let casePhotoList = this.data.casePhotoList;
let facePhotoList = this.data.facePhotoList;
let abnormalPhotoList = this.data.abnormalPhotoList;
let accessoryPhotoList = this.data.accessoryPhotoList;
if (currentTab == 2) {
wx.chooseVideo({
count: 1,
mediaType: ['video'],
sourceType: ['album'],
success: (res) => {
let src = {
tempVideoPath: res.tempFilePath,
size: res.size
};
abnormalPhotoList.push(src);
this.setData({
abnormalPhotoList: abnormalPhotoList,
useCameraTakePhoto: false,
isVideoModel: false,
});
}
})
} else {
wx.chooseMedia({
count: 1, // 選擇數量
mediaType: ['image'], // 文件類型 圖片
sourceType: ['album'], // 圖片來源 album：從相冊選
success: res => {
let formData = new FormData();
formData.append('type', currentTab);
let src = {
tempImagePath: res.tempFiles[0].tempFilePath,
size: res.tempFiles[0].size,
fileType: res.tempFiles[0].fileType,
}
if (currentTab == 0) {
casePhotoList.push(src)
that.setData({
casePhotoList: casePhotoList,
useCameraTakePhoto: false
})
for (const iterator of casePhotoList) {
formData.appendFile('files[]', iterator.tempImagePath);
}
// 2.選擇文件後，頁面顯示選擇的文件的本地臨時文件，且進行異步上傳
// 2.1.返回選定文件的本地文件路徑列表，可以作為img標簽的src屬性顯示圖片
let tempFilesPath = casePhotoList.map(item => ({
type: item.type ? item.type : 'image', // 文件類型
path: item.tempImagePath, // 文件本地路徑
size: item.size ? item.size : '', // 文件大小
}))
let {
tempFileList
} = that.data;
that.setData({
tempFileList: tempFileList.concat(tempFilesPath)
})
} else if (currentTab == 1) {
facePhotoList.push(src)
that.setData({
facePhotoList: facePhotoList,
useCameraTakePhoto: false
})
for (const iterator of [facePhotoList]) {
formData.appendFile('files[]', iterator.tempImagePath);
}
let tempFilesPath = facePhotoList.map(item => ({
type: item.type ? item.type : 'image', // 文件類型
path: item.tempImagePath, // 文件本地路徑
size: item.size ? item.size : '', // 文件大小
}))
let {
facetTempFileList
} = that.data;
that.setData({
facetTempFileList: facetTempFileList.concat(tempFilesPath)
})
} else if (currentTab == 3) {
accessoryPhotoList.push(src)
that.setData({
accessoryPhotoList: accessoryPhotoList,
useCameraTakePhoto: false
})
for (const iterator of accessoryPhotoList) {
formData.appendFile('files[]', iterator.tempImagePath);
}
}
let data = formData.getData();
// 2.2.異步上傳，發送請求 上傳圖片
...
},
})
}
},
關閉相機
//關閉系統相機頁面
closeCamera: function () {
this.setData({
useCamera: false,
useCameraTakePhoto: false,
})
},
點擊小圖片放大功能
// 點擊拍照後的圖片
changeMinImage(e) {
wx.showLoading({
title: '加載中',
icon: 'loading'
})
let item = e.target.dataset.item;
const that = this;
// 1. 預覽分為本地預覽和下載預覽， 進行判斷
if (item.type === 'image' && item.path) {
// 1.1.本地預覽，在新頁面中全屏預覽圖片
wx.previewImage({
urls: [item.path], // 需要預覽的圖片http鏈接列表 Array.<string>
success() {
wx.hideLoading()
},
fail() {
wx.showToast({
title: '預覽失敗',
icon: 'none',
duration: 2000
})
}
})
} else {
// 1.2.下載預覽，下載文件資源到本地，單次下載允許的最大文件為200MB
wx.downloadFile({
url: `${app.host}order/attachments/${item.store_name}/download`,
header: {
'Content-Type': 'application/json',
'token': '自己的Token'
},
success(res) {
wx.hideLoading()
if (item.type == "video") {
that.setData({
isSrc: true,
src: res.tempFilePath,
})
wx.openVideoEditor({
filePath: res.tempFilePath,
success(res) {}
})
} else {
wx.previewImage({ // 在新頁面中全屏預覽圖片
urls: [res.tempFilePath], // 需要預覽的圖片http鏈接列表 Array.<string>
})
}
},
fail() {
wx.showToast({
title: '預覽失敗',
icon: 'none',
duration: 2000
})
}
})
}
},
放大後的圖片關閉
// 點擊放大後的圖片進行關閉
changeMaxImage() {
this.setData({
isSrc: false,
src: {}
})
},
到這裡就寫完瞭，樣式就不多寫瞭，主要的是js實現
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。