微信小程序?qū)崿F(xiàn)自定義拍攝組件
更新時(shí)間：2022年08月28日 11:57:10 作者：sx_lz_1119
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自定義拍攝組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
微信小程序?qū)崿F(xiàn)自定義攝像頭（在攝像頭內(nèi)添加提示信息），供大家參考，具體內(nèi)容如下
攝像頭組件（wxml）
<!-- 拍照功能 自定義攝像頭
? ? ? ? ? bindtap：takePhotoDepot----從圖庫獲取
? ? ? ? ? bindtap：takePhoto----拍照
? ? ? ? ? bindtap：takeFrontBack---轉(zhuǎn)換攝像頭
?-->
<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="../../images/phopo.png"></cover-image>
? ? ? ? ? ? <cover-image bindtap="takePhoto" class="take_photo" src="../../images/starCamera.png"></cover-image>
? ? ? ? ? ? <cover-image bindtap="takeFrontBack" class="take_photo_frontBack" src="../../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}}">
<!-- 圖片縮小狀態(tài) ?-->
? ? ? ? <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='{{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="{{item.path}}" alt="" bindtap="changeMinImage" data-item="{{item}}" data-index="{{index}}" data-src='{{item.path}}' />
? ? ? ? ? </view>
? ? ? ? </view>?
<!-- 點(diǎn)擊縮小圖片放大展示-->
? ? ? <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="{{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>接下來就是關(guān)鍵了，主要還得看js怎么實(shí)現(xiàn)
實(shí)現(xiàn)的方法
打開攝像頭并且拍照
// 控制攝像頭是否顯示
? 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.異步上傳，發(fā)送請(qǐng)求 這里就不寫了
? ? ? ? ? ...
? ? ? ? }
? ? ? })
? ? } 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.選擇文件后，頁面顯示選擇的文件的本地臨時(shí)文件，且進(jìn)行異步上傳
? ? ? ? ? ? ? ?// 2.1.返回選定文件的本地文件路徑列表，可以作為img標(biāo)簽的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.異步上傳，發(fā)送請(qǐng)求 上傳照片
? ? ? ? ? ?}
? ? ? ? ?})
? ? }
? },轉(zhuǎn)換攝像頭
// 轉(zhuǎn)換攝像頭
? takeFrontBack() {
? ? const {
? ? ? phopo_camera
? ? } = this.data
? ? this.setData({
? ? ? phopo_camera: !phopo_camera
? ? })
? },打開手機(jī)相冊(cè)
// 打開手機(jī)相冊(cè)
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, // 選擇數(shù)量
? ? ? ? mediaType: ['image'], // 文件類型 圖片
? ? ? ? sourceType: ['album'], // 圖片來源 ?album：從相冊(cè)選
? ? ? ? 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.選擇文件后，頁面顯示選擇的文件的本地臨時(shí)文件，且進(jìn)行異步上傳
? ? ? ? ? ? // 2.1.返回選定文件的本地文件路徑列表，可以作為img標(biāo)簽的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.異步上傳，發(fā)送請(qǐng)求 上傳圖片
? ? ? ? ? ...
? ? ? ? ? ??
? ? ? ? },
? ? ? })
? ? }
? },關(guān)閉相機(jī)
//關(guān)閉系統(tǒng)相機(jī)頁面
? closeCamera: function () {
? ? this.setData({
? ? ? useCamera: false,
? ? ? useCameraTakePhoto: false,
? ? })
? },點(diǎn)擊小圖片放大功能
// 點(diǎn)擊拍照后的圖片
? changeMinImage(e) {
? ? wx.showLoading({
? ? ? title: '加載中',
? ? ? icon: 'loading'
? ? })
? ? let item = e.target.dataset.item;
? ? const that = this;
? ? // 1. 預(yù)覽分為本地預(yù)覽和下載預(yù)覽， 進(jìn)行判斷
? ? if (item.type === 'image' && item.path) {
? ? ? // 1.1.本地預(yù)覽，在新頁面中全屏預(yù)覽圖片
? ? ? wx.previewImage({
? ? ? ? urls: [item.path], // 需要預(yù)覽的圖片http鏈接列表 Array.<string>
? ? ? ? success() {
? ? ? ? ? wx.hideLoading()
? ? ? ? },
? ? ? ? fail() {
? ? ? ? ? wx.showToast({
? ? ? ? ? ? title: '預(yù)覽失敗',
? ? ? ? ? ? icon: 'none',
? ? ? ? ? ? duration: 2000
? ? ? ? ? })
? ? ? ? }
? ? ? })
? ? } else {
? ? ? // 1.2.下載預(yù)覽，下載文件資源到本地，單次下載允許的最大文件為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({ // 在新頁面中全屏預(yù)覽圖片
? ? ? ? ? ? ? urls: [res.tempFilePath], // 需要預(yù)覽的圖片http鏈接列表 Array.<string>
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? },
? ? ? ? fail() {
? ? ? ? ? wx.showToast({
? ? ? ? ? ? title: '預(yù)覽失敗',
? ? ? ? ? ? icon: 'none',
? ? ? ? ? ? duration: 2000
? ? ? ? ? })
? ? ? ? }
? ? ? })
? ? }
? },放大后的圖片關(guān)閉
// 點(diǎn)擊放大后的圖片進(jìn)行關(guān)閉
? changeMaxImage() {
? ? this.setData({
? ? ? isSrc: false,
? ? ? src: {}
? ? })
? },到這里就寫完了，樣式就不多寫了，主要的是js實(shí)現(xiàn)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
javascript設(shè)計(jì)模式 – 觀察者模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 觀察者模式,結(jié)合實(shí)例形式分析了javascript觀察者模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
網(wǎng)上好多屏蔽flash右鍵的方法，可多數(shù)是過期的或不合適的，現(xiàn)記錄下用JS方法屏蔽flash右鍵相關(guān)版權(quán)信息。2010-01-01
javascript生成img標(biāo)簽的3種實(shí)現(xiàn)方法(對(duì)象、方法、html)
這篇文章主要介紹了javascript生成img標(biāo)簽的3種實(shí)現(xiàn)方法,包括對(duì)象、方法、html三種實(shí)現(xiàn)方式,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
詳細(xì)聊聊TypeScript中any unknown never和void的區(qū)別
這篇文章主要給大家聊聊TypeScript 中 any、unknown、never 和 void 有什么區(qū)別，文中有詳細(xì)的代碼實(shí)例講解，具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
js實(shí)現(xiàn)簡(jiǎn)單秒表走動(dòng)的時(shí)鐘特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單秒表走動(dòng)的時(shí)鐘特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
這篇文章主要給大家介紹了關(guān)于利用原生JS獲取URL鏈接參數(shù)的幾種常見方法,文中通過實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
本文主要介紹了全面講解JavaScript原型與原型鏈，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
JS實(shí)現(xiàn)對(duì)json對(duì)象排序并刪除id相同項(xiàng)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)對(duì)json對(duì)象排序并刪除id相同項(xiàng)功能,涉及javascript針對(duì)json格式數(shù)據(jù)的遍歷、運(yùn)算、判斷、添加、刪除等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
JS實(shí)現(xiàn)紙牌發(fā)牌動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)紙牌發(fā)牌動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
微信小程序tabBar模板用法實(shí)例分析【附demo源碼下載】
這篇文章主要介紹了微信小程序tabBar模板用法,結(jié)合具體實(shí)例形式分析了tabBar模板的定義、配置、引用等相關(guān)操作技巧,需要的朋友可以參考下2017-11-11