您好,登錄后才能下訂單哦!
這篇文章主要介紹“uniapp怎么自定義相機”,在日常操作中,相信很多人在uniapp怎么自定義相機問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”uniapp怎么自定義相機”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
實現(xiàn)自定義相機
拓展性挺強的,可以實現(xiàn)自定義水印、身份證拍攝、人像拍攝等 這里我簡單實現(xiàn)一個相機功能主要用于解決閃退
Tip:這里需要創(chuàng)建nvue文件哦~
創(chuàng)建camera.nvue
<template> <view class="pengke-camera" :> <live-pusher id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="0" whiteness="0" :aspect="aspect" min-bitrate="1000" audio-quality="16KHz" device-position="back" :auto-focus="true" :muted="true" :enable-camera="true" :enable-mic="false" :zoom="false" @statechange="statechange" : ></live-pusher> <view class="menu"> <!--底部菜單區(qū)域背景--> <cover-image class="menu-mask" src="/static/live-camera/bar.png"></cover-image> <!--返回鍵--> <cover-image class="menu-back" @tap="back" src="/static/live-camera/back.png"></cover-image> <!--快門鍵--> <cover-image class="menu-snapshot" @tap="snapshot" src="/static/live-camera/shutter.png"></cover-image> <!--反轉(zhuǎn)鍵--> <cover-image class="menu-flip" @tap="flip" src="/static/live-camera/flip.png"></cover-image> </view> </view> </template> <script> let _this = null; export default { data() { return { poenCarmeInterval:null,//打開相機的輪詢 aspect: '2:3', //比例 windowWidth: '', //屏幕可用寬度 windowHeight: '', //屏幕可用高度 camerastate: false, //相機準(zhǔn)備好了 livePusher: null, //流視頻對象 snapshotsrc: null, //快照 }; }, onLoad(e) { _this = this; this.initCamera(); }, onReady() { this.livePusher = uni.createLivePusherContext('livePusher', this); this.startPreview(); //開啟預(yù)覽并設(shè)置攝像頭 this.poenCarme(); }, methods: { //輪詢打開 poenCarme(){ //#ifdef APP-PLUS if (plus.os.name == 'Android') { this.poenCarmeInterval = setInterval(function() { console.log(_this.camerastate); if (!_this.camerastate) _this.startPreview(); }, 2500); } //#endif }, //初始化相機 initCamera() { uni.getSystemInfo({ success: function(res) { _this.windowWidth = res.windowWidth; _this.windowHeight = res.windowHeight; let zcs = _this.aliquot(_this.windowWidth,_this.windowHeight); _this.aspect = (_this.windowWidth/zcs)+':'+(_this.windowHeight/zcs); // console.log('畫面比例:'+_this.aspect); } }); }, //整除數(shù)計算 aliquot(x, y) { if (x % y == 0) return y; return this.aliquot(y, x % y); }, //開始預(yù)覽 startPreview() { this.livePusher.startPreview({ success: a => { console.log(a) } }); }, //停止預(yù)覽 stopPreview() { this.livePusher.stopPreview({ success: a => { _this.camerastate = false; } }); }, //狀態(tài) statechange(e) { //狀態(tài)改變 console.log(e); if (e.detail.code == 1007) { _this.camerastate = true; } else if (e.detail.code == -1301) { _this.camerastate = false; } }, //返回 back() { uni.navigateBack(); }, //抓拍 snapshot() { //震動 uni.vibrateShort({ success: function () { console.log('success'); } }); //拍照 this.livePusher.snapshot({ success: e => { _this.snapshotsrc = e.message.tempImagePath; _this.stopPreview(); _this.setImage(); uni.navigateBack(); } }); }, //反轉(zhuǎn) flip() { this.livePusher.switchCamera(); }, //設(shè)置 setImage() { let pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; prevPage.$vm.setImage({ path: _this.snapshotsrc}); } } }; </script> <style lang="less"> .pengke-camera { justify-content: center; align-items: center; .menu { position: absolute; left: 0; bottom: 0; width: 750rpx; height: 180rpx; z-index: 98; align-items: center; justify-content: center; .menu-mask { position: absolute; left: 0; bottom: 0; width: 750rpx; height: 180rpx; z-index: 98; } .menu-back { position: absolute; left: 30rpx; bottom: 50rpx; width: 80rpx; height: 80rpx; z-index: 99; align-items: center; justify-content: center; } .menu-snapshot { width: 130rpx; height: 130rpx; z-index: 99; } .menu-flip { position: absolute; right: 30rpx; bottom: 50rpx; width: 80rpx; height: 80rpx; z-index: 99; align-items: center; justify-content: center; } } } </style>
這里用了一些圖片作為圖標(biāo)布局畫面美觀,例如返回圖標(biāo),拍攝圖標(biāo)
在點擊拍照的時候跳轉(zhuǎn)到camera頁面
即可 在需要使用的頁面中編寫setImage
方法,即可拿到返回過來的圖片臨時路徑 再通過uniapp自帶的上傳圖片api進行上傳至服務(wù)器即可 這樣就避免了調(diào)用原生相機
setImage(e){ //e.path即是圖片臨時路徑 uni.uploadFile({ url: '上傳接口的路徑', filePath: e.path, name: 'imageFile', success: function(res) { //服務(wù)器返回的圖片地址url }, error: function(err) { console.log(err) } }
如果既要實現(xiàn)從相冊選又要手機拍呢?該如何實現(xiàn) 這里相冊選調(diào)用的uniapp的api, 手機拍跳轉(zhuǎn)到自定義相機頁面即可
這里可以寫一個彈窗,讓它選擇,如果選擇了從相冊選圖片則
uni.chooseImage({ count: size, //默認9 sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖,默認二者都有 sourceType: ['album'], //從相冊選擇 success: function (res) { console.log(res)//拿到臨時路徑再向后端發(fā)送上傳請求.... } });
如果用相機拍則跟上方步驟一致
到此,關(guān)于“uniapp怎么自定義相機”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。