您现在的位置是:网站首页> 编程资料编程资料
微信小程序实现自定义拍摄组件_javascript技巧_
2023-05-24
420人已围观
简介 微信小程序实现自定义拍摄组件_javascript技巧_
微信小程序实现自定义摄像头(在摄像头内添加提示信息),供大家参考,具体内容如下
摄像头组件(wxml)
返回
唤醒摄像头组件(wxml)
拍摄照片
自定义展示拍照后的图片(wxml)
接下来就是关键了,主要还得看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) })
点击排行
本栏推荐
