您好,登录后才能下订单哦!
这篇文章主要介绍“uniapp怎么自定义相机”,在日常操作中,相信很多人在uniapp怎么自定义相机问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”uniapp怎么自定义相机”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
实现自定义相机
拓展性挺强的,可以实现自定义水印、身份证拍摄、人像拍摄等 这里我简单实现一个相机功能主要用于解决闪退
Tip:这里需要创建nvue文件哦~
创建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"> <!--底部菜单区域背景--> <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-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); } }); }, //整除数计算 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; } }); }, //状态 statechange(e) { //状态改变 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) } }
如果既要实现从相册选又要手机拍呢?该如何实现 这里相册选调用的uniapp的api, 手机拍跳转到自定义相机页面即可
这里可以写一个弹窗,让它选择,如果选择了从相册选图片则
uni.chooseImage({ count: size, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: ['album'], //从相册选择 success: function (res) { console.log(res)//拿到临时路径再向后端发送上传请求.... } });
如果用相机拍则跟上方步骤一致
到此,关于“uniapp怎么自定义相机”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。