微信小程序实现自定义拍摄组件 - 网站

微信小程序实现自定义拍摄组件

分类:JavaScript进阶教程_JavaScript技术文章 · 发布时间:2023-03-29 19:06 · 阅读:7956

这篇文章主要为大家详细介绍了微信小程序实现自定义拍摄组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

微信小程序实现自定义摄像头(在摄像头内添加提示信息),供大家参考,具体内容如下

摄像头组件(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技术站。

标签:
微信小程序 拍摄组件

相关文章

一起来学习TypeScript的类型

这篇文章主要为大家详细介绍了TypeScript的类型,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

JavaScript去除字符串两端空格的三种方法

本文主要介绍了JavaScript去除字符串两端空格的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

html2canvas图片跨域问题图文详解

我们在进行图片保存的时候经常会发现图片跨域了,下面下面这篇文章主要给大家介绍了关于html2canvas图片跨域问题的相关资料,需要的朋友可以参考下

JavaScript中Set基本使用方法实例

因为Set中存放的数据都是不会重复的数据,我们在编写JS代码的时候,因此我们可以利用Set来帮助我们更便捷地完成许多的事,下面这篇文章主要给大家介绍了关于JavaScript中Set基本使用方法的相关资料,需要的朋友可以参考下

详解vscode中console.log的两种快速写法

这篇文章主要介绍了vscode中console.log的两种快速写法,每种方法通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

返回分类 返回首页