uniapp实现自定义相机

这篇具有很好参考价值的文章主要介绍了uniapp实现自定义相机。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

起因

由于最近用uniapp调用原生相机容易出现闪退问题,找了很多教程又是压缩图片又是优化代码,我表示并没有太大作用!!

于是开启了我的解决之路

  • 利用livePusher实现

实现自定义相机

拓展性挺强的,可以实现自定义水印、身份证拍摄、人像拍摄等
这里我简单实现一个相机功能主要用于解决闪退

Tip:这里需要创建nvue文件哦~

创建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">
			<!--底部菜单区域背景-->
			<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实现自定义相机

拓展

如果既要实现从相册选又要手机拍呢?该如何实现
这里相册选调用的uniapp的api,
手机拍跳转到自定义相机页面即可

这里可以写一个弹窗,让它选择,如果选择了从相册选图片则

uni.chooseImage({
	count: size, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(res)//拿到临时路径再向后端发送上传请求....
	}
});

如果用相机拍则跟上方步骤一致

实现多种自定义相机

这里的话我贴上效果图,如果需要就在我的博客资源中获取吧

水印相机

uniapp实现自定义相机

身份证相机

uniapp实现自定义相机

人像相机

uniapp实现自定义相机
这样我就成功解决了闪退问题~,有问题评论区d我文章来源地址https://www.toymoban.com/news/detail-492753.html

到了这里,关于uniapp实现自定义相机的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • threejs 实现场景漫游效果(相机沿着自定义轨道移动)

    效果视频: Video_22-06-15_18-10-11 实现思路:先创建一条曲线curve作为运动路线,然后使用const points = curve.getPoints(n)方法将curve分成n-1段;我们可以通过points[n] 获取第n个点的坐标位置;将相机的位置设置为这个坐标,在动画中不断地修改n的值达到移动的效果;具体操作如下:

    2024年02月11日
    浏览(92)
  • flutter开发实战-Camera自定义相机拍照功能实现

    flutter开发实战-Camera自定义相机拍照功能实现 在项目中使用image_picker插件时候,在android设备上使用无法默认设置前置摄像头(暂时不清楚什么原因),由于项目默认需要使用前置摄像头,所以最终采用自定义相机实现拍照功能。 在工程的iOS的info.plist文件中添加相机、麦克风

    2024年02月21日
    浏览(53)
  • uniapp实现自定义上传图片

    在正式自定义上传前我们先将静态页面搭建好。 样式代码: 通过uniapp的uni.chooseImage从本地相册选择图片或使用相机拍照。 在data中定义一个响应式数据来接收我们选择的图片,然后通过v-for渲染到我们的页面,达到缩略图的效果。 代码: 效果: 最初我们定义了只能选择九张

    2024年02月12日
    浏览(29)
  • uniapp 微信小程序 - 调起手机摄像头: 拍摄身份证的正反面,自定义身份证取景框,在相机上绘制 “身份证轮廓“ 与提示文字(超详细示例源码,一键复制运行开箱即用)

    这个需求很难在网上找到,就算找到都是很乱的代码。。 本篇博客实现了在uniapp项目中,微信小程序平台下调起手机相机照身份证功能,在相机上添加辅助框、自定义文案或图片(给相机加上身份证辅助线的轮廓),并且解决了 “拒绝相机默认授权后,无法再次拉起相机授

    2024年02月09日
    浏览(224)
  • uniapp自定义导航渐显渐隐效果实现

    前两天遇到一个客户的需求,需要在页面滚动时同步修改导航栏的背景透明度。但是原生的导航栏无法满足这样的需求。虽然 uview 提供的组件已经能够满足大部分使用场景,包括左、中、右三块都能通过插槽自定义,但是背景仍然只能固定不变。因此,我们需要基于 uview 的

    2024年02月06日
    浏览(40)
  • uniapp用picker实现自定义三级联动(children)

    数据大概得结构: html: js:

    2024年02月04日
    浏览(34)
  • uniapp+uView2.0实现自定义动态tabbar

         1.需求说明      2.实现原理说明      3.实现过程          3.1集成uView2.0          3.2 自定义tabbar          3.3 vuex定义tabbar共享信息          3.4 tabbar显示个数控制      要求不同时间显示不同的tabbar.点击不同的tabbar跳转到不同的页面,能随时实现tabb

    2023年04月18日
    浏览(41)
  • uniApp开发小程序自定义tabBar底部导航栏+tabBar中间凸起自定义样式实现

            先看效果是否可以满足你们,如果可以满足你只要一步一步照着做绝对没有错。         本人技术不佳,研究了一整天,全网的大佬们写的博客看的晕头转向,避免大伙再走弯路,跟着我以下步骤一点一点来绝对可以实现。         最终效果图: (如果你

    2024年02月04日
    浏览(49)
  • uniapp+uview2.0+vuex实现自定义tabbar组件

    效果图 1.在components文件夹中新建MyTabbar组件 2.组件代码 3.父组件 4.创建store目录,下面创建index.js文件

    2024年02月04日
    浏览(48)
  • uniapp小程序实现自定义返回按钮和胶囊对齐 做到兼容各手机型号

    效果: 用到的API: 官网地址: https://uniapp.dcloud.net.cn/api/ui/menuButton.html#getmenubuttonboundingclientrect 控制台打印: 代码示例:

    2024年01月24日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包