当前位置: 首页 > news >正文

uniapp实现自定义相机

自定义相机

  • 起因
    • 由于最近用uniapp调用原生相机容易出现闪退问题,找了很多教程又是压缩图片又是优化代码,我表示并没有太大作用!!
  • 实现自定义相机
    • 使用
      • 效果图
  • 拓展
  • 实现多种自定义相机
    • 水印相机
    • 身份证相机
    • 人像相机

起因

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

于是开启了我的解决之路

  • 利用livePusher实现

实现自定义相机

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

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

创建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"><!--底部菜单区域背景--><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);}});},//整除数计算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, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有sourceType: ['album'], //从相册选择success: function (res) {console.log(res)//拿到临时路径再向后端发送上传请求....}
});

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

实现多种自定义相机

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

水印相机

在这里插入图片描述

身份证相机

在这里插入图片描述

人像相机

在这里插入图片描述
这样我就成功解决了闪退问题~,有问题评论区d我

相关文章:

uniapp实现自定义相机

自定义相机起因由于最近用uniapp调用原生相机容易出现闪退问题&#xff0c;找了很多教程又是压缩图片又是优化代码&#xff0c;我表示并没有太大作用!!实现自定义相机使用效果图拓展实现多种自定义相机水印相机身份证相机人像相机起因 由于最近用uniapp调用原生相机容易出现闪退…...

插值多项式的龙格现象的介绍与模拟

在文章拉格朗日插值多项式的原理介绍及其应用中&#xff0c;笔者介绍了如何使用拉格朗日插值多项式来拟合任意数据点集。   事实上&#xff0c;插值多项式会更倾向于某些形状。德国数学家卡尔龙格Carl Runge发现&#xff0c;插值多项式在差值区间的端点附近会发生扭动&#x…...

Spring整体架构包含哪些组件?

Spring是一个轻量级java开源框架。Spring是为了解决企业应用开发的复杂性而创建的&#xff0c;它使用基本的JavaBean来完成以前只可能由EJB完成的事情。 Spring的用途不仅限于服务器端的开发&#xff0c;从简单性、可测试性和松耦合的角度而言&#xff0c;任何java应用都可以从…...

开发接口需要考虑哪些问题?

1 接口名字 user/ user/adduser/xxx 见名知意&#xff0c;调用接口的开发人员和后来接手的开发人员能够根据接口名称大致猜测出接口作用。 2 协议 设计接口时&#xff0c;应明确调用接口的协议&#xff0c;是采用HTTP协议,HTTPS协议还是FTP协议。比如跨语言调用通常使用WebS…...

关于Activiti7审批工作流绘画流程图(2)

文章目录一、25张表详解二、安装插件一.定制流程提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、25张表详解 虽然表很多&#xff0c;但是仔细观察&#xff0c;我们会发现Activiti 使用到的表都是 ACT_ 开头的。表名的第二部分用两个字母表明表的用…...

String.format()对日期进行格式化

前言&#xff1a;String.format()作为文本处理工具&#xff0c;为我们提供强大而丰富的字符串格式化功能&#xff0c;这里根据查阅的资料做个学习笔记&#xff0c;整理成如下文章&#xff0c;供后续复习查阅。一. format()方法的两种重载形式&#xff1a;format(String format,…...

核酸检测信息管理系统

目录前言一、功能与需求分析二、详细设计与实现1、data包&#xff08;1&#xff09;DataDataBase&#xff08;2&#xff09;NaPaNamePassword2、operation包&#xff08;1&#xff09;操作接口&#xff08;2&#xff09;Resident用户功能&#xff08;3&#xff09;Simper用户功…...

典型回溯题目 - 全排列(一、二)

典型回溯题目 - 全排列&#xff08;一、二&#xff09; 46. 全排列 题目链接&#xff1a;46. 全排列状 题目大意&#xff1a; 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 注意&#xff1a;&#xff08;1&#xf…...

数据清洗和特征选择

数据清洗和特征选择 数据清洗和特征挖掘的工作是在灰色框中框出的部分&#xff0c;即“数据清洗>特征&#xff0c;标注数据生成>模型学习>模型应用”中的前两个步骤。 灰色框中蓝色箭头对应的是离线处理部分。主要工作是 从原始数据&#xff0c;如文本、图像或者应…...

java StringBuilder 和 StringBuffer 万字详解(深度讲解)

StringBuffer类介绍和溯源StringBuffer类常用构造器和常用方法StringBuffer类 VS String类&#xff08;重要&#xff09;二者的本质区别&#xff08;含内存图解&#xff09;二者的相互转化StringBuilder类介绍和溯源StringBuilder类常用构造器和常用方法String类&#xff0c;St…...

【Linux】帮助文档查看方法

目录1 Linux帮助文档查看方法1.1 man1.2 内建命令(help)1 Linux帮助文档查看方法 1.1 man man 是 Linux 提供的一个手册&#xff0c;包含了绝大部分的命令、函数使用说明。 该手册分成很多章节&#xff08;section&#xff09;&#xff0c;使用 man 时可以指定不同的章节来浏…...

UEFI 实战(2) HelloWorld 之一 helloworld及.inf文件

初识UEFI 按惯例&#xff0c;首先让我们用HelloWorld跟UEFI打个招呼吧 标准application /*main.c */ #include <Uefi.h> EFI_STATUS UefiMain ( IN EFI_HANDLE ImageHandle, IN EFI_SYSTEM_TABLE *SystemTable ) { SystemTable -> ConOut-> OutputString(SystemTab…...

向2022年度商界木兰上榜女性致敬!

目录 信息来源&#xff1a; 2022年度商界木兰名单 简介 评选标准 动态 榜单 为你心中的2023商界女神投上一票 信息来源&#xff1a; 2022年度商界木兰榜公布 华为孟晚舟获商界木兰最高分 - 脉脉 【最具影响力女性】历届商界木兰榜单 中国最具影响力的30位商界女性名单…...

ChatGPT助力校招----面试问题分享(二)

1 ChatGPT每日一题&#xff1a;DC-DC与LDO的区别 问题&#xff1a;介绍一下DC-DC与LDO的区别 ChatGPT&#xff1a;DC-DC和LDO都是电源管理电路&#xff0c;它们的主要作用是将输入电压转换为所需的输出电压&#xff0c;以供电子设备使用。但是&#xff0c;它们之间存在一些重…...

JAVA架构与开发(JAVA架构是需要考虑的几个问题)

在企业中JAVA架构师主要负责企业项目技术架构&#xff0c;企业技术战略制定&#xff0c;技术框架搭建&#xff0c;技术培训和技术攻坚的工作。 在JAVA领域&#xff0c;比较多的都是web项目。用于解决企业的数字化转型。对于JAVA架构师而言&#xff0c;平时对项目的架构主要考虑…...

vue 中 v-for 的使用

v-for 获取列表的前 n 条、中间范围、末尾 n 条的数据 list: [{ img: /static/home/news1.png, title: 标题1 },{ img: /static/home/news2.png, title: 标题2 },{ img: /static/home/news1.png, title: 标题3 },{ img: /static/home/news2.png, title: 标题4 },{ img: /stati…...

项目--基于RTSP协议的简易服务器开发(2)

一、项目创立初衷&#xff1a; 由于之前学过计算机网络的相关知识&#xff0c;了解了计算机网络的基本工作原理&#xff0c;对于主流的协议有一定的了解。但对于应用层的协议还知之甚少&#xff0c;因此我去了解了下目前主要的应用层传输协议&#xff0c;发现RTSP&#xff08;…...

ubus编译_环境搭建

文章目录一、环境搭建脚本toolChain_jsonc.cmaketoolChain_libubox.cmaketoolChain_ubus.cmakeinstall.sh二、测试出现问题&#xff1a;三、测试uloopmain.c 每5s打印信息一、环境搭建脚本 准备四个文件 install.sh,toolChain_jsonc.cmake,toolChain_libubox.cmake,toolChai…...

移动通信(16)信号检测

常见的信号检测算法一般包括以下几类检测算法&#xff1a;最优、线性和非线性。最优检测算法&#xff1a;最大似然算法线性检测算法&#xff1a;迫零检测算法和最小均方误差检测算法非线性检测算法&#xff1a;串行干扰消除检测算法球形译码检测算法属于一种次优检测算法&#…...

数据结构与算法之《顺序表》

目录 1.什么是顺序表 顺序表的优势和缺点 顺序表预备知识 顺序表的代码实现 顺序表头部插入 顺序表的销毁 顺序表的头删 顺序表的尾删 顺序表的尾插 顺序表的任意位置插入 顺序表的查找 顺序表的打印 1.什么是顺序表 这篇文章我们来讲一下基础数据结构的顺序表&…...

MySQL索引15连问,抗住!

1. 索引是什么&#xff1f;索引是一种能提高数据库查询效率的数据结构。它可以比作一本字典的目录&#xff0c;可以帮你快速找到对应的记录。索引一般存储在磁盘的文件中&#xff0c;它是占用物理空间的。正所谓水能载舟&#xff0c;也能覆舟。适当的索引能提高查询效率&#x…...

【服务器管理】手动部署LNMP环境(CentOS 8)(非阿里云版本)

简述 如果是你是阿里云的服务器&#xff0c;我推荐你看引用的文章&#xff0c;本文也是参考了很多这篇文章的内容。 https://help.aliyun.com/document_detail/173042.htm 系统版本&#xff1a; CentOS 8 其实CentOS 7的版本可能更好安装一点&#xff0c;但是我有个服务推荐使…...

论文笔记:Positive-incentive Noise

2022 TNNLS 中心思想是&#xff1a;噪声并不一定是有害的 1 CV问题中的噪声 以图像分类为例 对图像加入适量的噪声后再训练&#xff0c;识别准确率反而上升了 再以目标检测为例&#xff1a; 从遥感影像中做飞机检测&#xff0c;一般都是把飞机紧紧框住&#xff0c;然后做…...

340秒语音芯片,轻松实现语音交互,畅享智能生活WTV380语音ic方案

随着智能家居、安防报警、宠物用品 等&#xff0c;智能设备的普及&#xff0c;语音交互技术正在逐渐成为人机交互的主要方式之一。而如何实现稳定高效的语音交互&#xff0c;就需要借助先进的语音芯片技术。今天&#xff0c;我们介绍的是一款高性能的语音芯片——WTV380&#x…...

有java基础学习大数据该如何规划

大数据开发对于Java语言的依赖程度比较高&#xff0c;如果想尝试大数据开发&#xff0c;学习过Java语言就很容易上手 Java是目前使用广泛的编程语言之一&#xff0c;具有的众多特性&#xff0c;特别适合作为大数据应用的开发语言。 目前很多大数据开发团队都在使用Java语言&a…...

【Java基础】HashMap的底层数据结构是怎样的?

HashMap就是以Key-Value的方式进行数据存储的一种数据结构。 HashMap在jdk1.7之前和jdk1.8之后的底层数据结构是不一样的。 在jdk1.7之前是数组链表的形式&#xff0c;并通过entry节点保存key和value值&#xff1b;当Hash冲突比较严重的时候&#xff0c;在数组上形成的链表就会…...

MongoDB5副本集高可用集群部署

MongoDB5副本集高可用集群部署 1.MongoDB简介 MongoDB官方网站&#xff1a;https://www.mongodb.com ​ MongoDB最大的特点是表结构灵活可变&#xff0c;字段类型可以随时修改。MongoDB中的每一行数据只是简单的被转化成Json格式后存储&#xff0c;因此MongoDB中没有MySQL中表…...

【Java】最新版本SpringCloudStream整合RocketMQ实现单项目中事件的发布与监听

文章目录前言依赖配置代码参考前言 SpringCloud项目中整合RocketMQ是为了削峰填谷。 这里我使用RocketMQ的作用用于接收项目中产生的消息&#xff0c;然后异步的发送邮件给客户&#xff0c;这是这个项目的产生的背景。 依赖配置 <dependencies><dependency><…...

abp.net 5.0 部署IIS10

今天遇到了abp.net 5.0部署iis10被卡住的问题&#xff0c;网上找了一些资料&#xff0c;都不是我要的&#xff0c;最后我总结一下我用的是 5.0的版本&#xff0c;所以我需要给服务器安装 iis5.0的相关运行环境 1&#xff1a;https://dotnet.microsoft.com/zh-cn/download/dotne…...

Windows安装Qt与VS2019添加QT插件

一、通过Qt安装包方式http://download.qt.io/archive/qt/5.12/5.12.3/.安装可以就选中这个MSVC 2017 64-bit&#xff0c;其他就暂时不用了二、通过vs2019安装Qt插件方式方法1下面这种方式本人安装不起来&#xff0c;一直卡住下不下来。拓展->管理拓展->联机->搜索Qt&a…...