微信小程序实现自定义拍摄组件
这篇文章主要为大家详细介绍了微信小程序实现自定义拍摄组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
微信小程序实现自定义摄像头(在摄像头内添加提示信息),供大家参考,具体内容如下
摄像头组件(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) }) } 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. 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. }) } }, fail() { wx.showToast({ title: '预览失败', icon: 'none', duration: 2000 }) } }) } }, 放大后的图片关闭
// 点击放大后的图片进行关闭 changeMaxImage() { this.setData({ isSrc: false, src: {} }) },到这里就写完了,样式就不多写了,主要的是js实现
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持0133技术站。
标签: