您现在的位置是:网站首页> 编程资料编程资料

微信小程序实现自定义拍摄组件_javascript技巧_

2023-05-24 418人已围观

简介 微信小程序实现自定义拍摄组件_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)             })   
                
                

-六神源码网