自定義相機

• 起因
• • 由于最近用uniapp調用原生相機容易出現(xiàn)閃退問題，找了很多教程又是壓縮圖片又是優(yōu)化代碼，我表示并沒有太大作用!!
• 實現(xiàn)自定義相機
• • 使用
  • • 效果圖
• 拓展
• 實現(xiàn)多種自定義相機
• • 水印相機
  • 身份證相機
  • 人像相機

起因

由于最近用uniapp調用原生相機容易出現(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-pusherid="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><!--反轉鍵--><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, //相機準備好了livePusher: null, //流視頻對象snapshotsrc: null, //快照};},onLoad(e) {_this = this;this.initCamera();},onReady() {this.livePusher = uni.createLivePusherContext('livePusher', this);this.startPreview(); //開啟預覽并設置攝像頭this.poenCarme();},methods: {//輪詢打開poenCarme(){//#ifdef APP-PLUSif (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);},//開始預覽startPreview() {this.livePusher.startPreview({success: a => {console.log(a)}});},//停止預覽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();}});},//反轉flip() {this.livePusher.switchCamera();},//設置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>

這里用了一些圖片作為圖標布局畫面美觀，例如返回圖標，拍攝圖標

使用

在點擊拍照的時候跳轉到camera頁面即可
在需要使用的頁面中編寫setImage方法,即可拿到返回過來的圖片臨時路徑
再通過uniapp自帶的上傳圖片api進行上傳至服務器即可
這樣就避免了調用原生相機

setImage(e){ //e.path即是圖片臨時路徑 uni.uploadFile({url: '上傳接口的路徑',filePath: e.path,name: 'imageFile',success: function(res) {//服務器返回的圖片地址url},error: function(err) {console.log(err)} }

效果圖

拓展

如果既要實現(xiàn)從相冊選又要手機拍呢？該如何實現(xiàn)
這里相冊選調用的uniapp的api，
手機拍跳轉到自定義相機頁面即可

這里可以寫一個彈窗，讓它選擇，如果選擇了從相冊選圖片則

uni.chooseImage({count: size, //默認9sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有sourceType: ['album'], //從相冊選擇success: function (res) {console.log(res)//拿到臨時路徑再向后端發(fā)送上傳請求....} });

如果用相機拍則跟上方步驟一致

實現(xiàn)多種自定義相機

這里的話我貼上效果圖，如果需要就在我的博客資源中獲取吧

水印相機

身份證相機

人像相機

這樣我就成功解決了閃退問題~，有問題評論區(qū)d我

總結

以上是生活随笔為你收集整理的uniapp实现自定义相机的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。