微信小程序实现自定义摄像头(在摄像头内添加提示信息),供大家参考,具体内容如下
摄像头组件(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="https://www.atool.online/images/phopo.png"></cover-image> <cover-image bindtap="takePhoto" class="take_photo" src="https://www.atool.online/images/starCamera.png"></cover-image> <cover-image bindtap="takeFrontBack" class="take_photo_frontBack" src="https://www.atool.online/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='https://www.atool.online/article/{{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="https://www.atool.online/article/{{item.path}}" alt="" bindtap="changeMinImage" data-item="{{item}}" data-index="{{index}}" data-src='https://www.atool.online/article/{{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="https://www.atool.online/article/{{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实现
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。