uniapp自定義相機實現(xiàn)示例詳解
自定義相機
起因
由于最近用uniapp調(diào)用原生相機容易出現(xiàn)閃退問題,找了很多教程又是壓縮圖片又是優(yōu)化代碼,我表示并沒有太大作用!!
于是開啟了我的解決之路
利用livePusher實現(xiàn)
實現(xiàn)自定義相機
拓展性挺強的,可以實現(xiàn)自定義水印、身份證拍攝、人像拍攝等 這里我簡單實現(xiàn)一個相機功能主要用于解決閃退
Tip:這里需要創(chuàng)建nvue文件哦~
創(chuàng)建camera.nvue
<template> <view class="pengke-camera" :style="{ width: windowWidth, height: windowHeight }"> <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" :style="{ width: windowWidth, height: windowHeight }" ></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進(jìn)行上傳至服務(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, //默認(rèn)9 sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['album'], //從相冊選擇 success: function (res) { console.log(res)//拿到臨時路徑再向后端發(fā)送上傳請求.... } });
如果用相機拍則跟上方步驟一致
實現(xiàn)多種自定義相機
這里的話我貼上效果圖,如果需要就在我的博客資源中獲取吧
水印相機
身份證相機
人像相機
這樣我就成功解決了閃退問題~
以上就是uniapp自定義相機實現(xiàn)示例詳解的詳細(xì)內(nèi)容,更多關(guān)于uniapp自定義相機的資料請關(guān)注腳本之家其它相關(guān)文章!