uniapp自定义相机实现示例详解

目录

• 自定义相机
• 起因
• 利用livePusher实现
• 使用
• 效果图
• 拓展
• 实现多种自定义相机
• 水印相机
• 身份证相机
• 人像相机

自定义相机

起因

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

于是开启了我的解决之路

利用livePusher实现

实现自定义相机

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

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

创建camera.nvue

这里用了一些图片作为图标布局画面美观，例如返回图标，拍摄图标

使用

在点击拍照的时候跳转到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自定义相机实现示例详解的详细内容，更多关于uniapp自定义相机的资料请关注脚本之家其它相关文章！