uniapp实现水印相机

uniapp实现水印相机-livePusher

水印相机

背景

前两天拿到了一个需求,要求在内部的oaApp中增加一个卫生检查模块,这个模块中的核心诉求就是要求拍照的照片添加水印。对于这个需求,我首先想到的是直接去插件市场,下一个水印相机插件导入使用。可惜,这个oaApp的架子搭建实在是毛坯,很多时候一些简单方法,并不能直接使用。没办法,只能去找一些不那么常规的方法。在网上,找到一些方法使用livePusher和canvas来实现水印相机的效果。

核心livePusher与canvas

livePusher

官方介绍

实时音视频录制,也称直播推流。

这里使用livePusher来实现,调起系统相机,实现摄像头实时画面预览。
页面布局(页面需要是 .nvue的文件)

<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>

onReady时创建 live-pusher 上下文 livePusherContext 对象,并初始化相机开启预览。

this.livePusher = uni.createLivePusherContext('livePusher', this);
this.startPreview(); //开启预览并设置摄像头//开始预览
startPreview() {this.livePusher.startPreview({success: a => {console.log(a)}});
},
一些踩坑的想法

这里没使用livePusher之前,我的想法是采用webView加plus-camera的方法去构建一个能够自定义的拍摄页面。为什么会有这个错误的想法,是因为我曾用过webView加plus-barcode构建了自定义的扫码页面。实践发现这个想法是错误的,因为无论是uniapp还是plus-camera使用到相机时都是调起系统的相机功能,且在app端使用内嵌相机页面的api也不支持。

拍照的操作方法
<view class="menu"><!-- 底部菜单区域背景 --><cover-image class="menu-mask" src="/static/image/13@3x.png"></cover-image><!--返回键--><cover-image class="menu-back" @click="back" src="/static/image/icon-back@3x.png"></cover-image><!--快门键--><cover-image class="menu-snapshot" @tap="snapshot" src="/static/image/condition-data-bj-circles@3x.png"></cover-image><!--反转键--><cover-image class="menu-flip" @tap="flip" src="/static/image/Ranking-cylindricality-top10@3x.png"></cover-image></view>
//抓拍snapshot() {//震动uni.vibrateShort({success: function() {console.log('success');}});this.livePusher.snapshot({success: e => {_this.snapshotsrc = e.message.tempImagePathlet data = {url:_this.snapshotsrc,deptName: _this.deptName,time: _this.time}uni.$emit('waterMark', data);// 发送数据后返回上一页uni.navigateBack();}});},//反转flip() {this.livePusher.switchCamera();},
水印添加

用一个相对定位,将你的水印添加到你需要的位置,就可以试下水印和画面的实时预览啦。

canvas

前面拍照得到的照片,实际上水印并没有添加到画面中,这个时候我们需要使用canvas重新绘制,将图片和水印绘制在一起。

		<canvas v-if="canvasShow" :style="canvasStyle" canvas-id="watermarkCanvas"></canvas>
// 添加水印的函数addWatermark(imagePath, markDept, markTime) {return new Promise((resolve, reject) => {uni.getImageInfo({src: imagePath,success: (info) => {console.log("info.width, info.height", info.width, info.height);const ctx = uni.createCanvasContext('watermarkCanvas');ctx.drawImage(info.path, 0, 0, info.width, info.height);ctx.width = info.width;ctx.height = info.height;// 设置水印样式ctx.setFontSize(50); // 设置字体大小ctx.setFillStyle('white'); // 设置水印颜色ctx.setGlobalAlpha(0.5); // 设置水印透明度// 添加水印文字// ctx.fillText(markDept, info.width - 15, info.height - 55);// ctx.fillText(markTime, info.width - 15, info.height - 15);ctx.fillText('部门', 30, 250); // 设置水印位置ctx.fillText(markDept, 30, 300); // 设置水印位置ctx.fillText('时间', 30, 350); // 设置水印位置ctx.fillText(markTime, 30, 400); // 设置水印位置ctx.draw(true, () => {uni.canvasToTempFilePath({canvasId: 'watermarkCanvas',success: (res) => {console.log("res.tempFilePath", res.tempFilePath);resolve(res.tempFilePath);},fail: (err) => {reject(err);}});});},fail: (err) => {reject(err);}});});},

最终效果

预览画面

水印相机-预览

绘制好的水印照片

水印相机-水印照片

最后

水印照片的比例以及水印的位置需要自己多调试几次找到合适的比例和位置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/45193.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

unity 环形循环切换UI

环形ui管理器 using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using DG.Tweening; using System.Collections; using Unity.VisualScripting;public class LevelSelector : MonoBehaviour {public GameObject levelButtonPrefab; // 关卡按钮的…

Elasticsearch:介绍 retrievers - 搜索一切事物

作者&#xff1a;来自 Elastic Jeff Vestal, Jack Conradson 在 8.14 中&#xff0c;Elastic 在 Elasticsearch 中引入了一项名为 “retrievers - 检索器” 的新搜索功能。继续阅读以了解它们的简单性和效率&#xff0c;以及它们如何增强你的搜索操作。 检索器是 Elasticsearc…

知识图谱与LLMs:实时图分析(通过其关系的上下文理解数据点)

大型语言模型 (LLM) 极大地改变了普通人获取数据的方式。不到一年前&#xff0c;访问公司数据需要具备技术技能&#xff0c;包括熟练掌握各种仪表板工具&#xff0c;甚至深入研究数据库查询语言的复杂性。然而&#xff0c;随着 ChatGPT 等 LLM 的兴起&#xff0c;随着所谓的检索…

Ubuntu系统安装mysql之后进行远程连接

1.首先要配置数据库允许进行远程连接 1.1 打开MySQL配置文件 /etc/mysql/mysql.conf.d/mysqld.cnf sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf1.2 修改 bind-address 行 #按i进入插入模式 bind-address 0.0.0.0 #按 Esc 键退出插入模式。 #输入:wq 然后按 Enter 保存并退…

React学习笔记02-----

一、React简介 想实现页面的局部刷新&#xff0c;而不是整个网页的刷新。AJAXDOM可以实现局部刷新 1.特点 &#xff08;1&#xff09;虚拟DOM 开发者通过React来操作原生DOM&#xff0c;从而构建页面。 React通过虚拟DOM来实现&#xff0c;可以解决DOM的兼容性问题&#x…

Window10下安装WSL-Ubuntu20.04

1.开启并更新WSL 1.1开启WSL 首先先来看一下电脑是否能够开启WSL:待补充... 然后再来看一下如何开启WSL:win->设置->应用->应用和功能->程序和功能&#xff0c;如下所示&#xff1a; 最后选择启用或关闭Windows功能&#xff0c;开启两个选项&#xff1a;1.Hyper-V…

工具推荐|语音轻松记笔记,AI帮你识别和润色

# 你日常有没有遇到这样的场景&#xff1f; 偶尔有一些奇思妙想想要记录下来&#xff0c;但没有一个轻量的工具&#xff0c;往往会想着想着就把这个想法抛之脑后。特别是搞短视频的&#xff0c;你也许希望把当时的想法录下来&#xff0c;稍微剪辑下就能出一条不错的口播视频。…

springboot的JWT令牌

生成JWT令牌 依赖 <!--jwt令牌--> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.9.1</version> </dependency> <dependency> <groupId>javax.xml.bind<…

pico+unity预设配置

picosdk中有很多预设的配置、使用预设配置的方法有 1、创建 XR Origin、展开 XR Origin > Camera Offset&#xff0c;选中 LeftHand Controller。点击 XR Controller (Action-Based) 面板右上角的 预设 按钮 2、打开Assets\Samples\XR Interaction Toolkit\2.5.2\Starter A…

Linux--YUM仓库部署及NFS共享存储

目录 一、YUM仓库服务 1.1 YUM介绍 1.2 yum 常用的命令 1.3 YUM 源的提供方式 1.3.1 配置本地 yum 源仓库 1.3.2 配置 ftp 源 1.3.3 配置http服务源 二、NFS 共享存储 2.1 NFS基本概述 2.2 为什么使用 NFS 共享存储 2.3 NFS 应用场景 2.4 NFS 实现原理 2.5 NFS文件…

gitlab 搭建使用

1. 硬件要求 ##CPU 4 核心500用户 8 核心1000用户 ##内存 4 G内存500用户 8 G内存1000用户 2. 下载 链接 3. 安装依赖 yum -y install curl openssh-server postfix wget 4. 安装gitlab组件 yum -y localinstall gitlab-ce-15.9.3-ce.0.el7.x86_64.rpm 5. 修改配置文…

Qt Quick qml自定义控件:qml实现电池控件

qml入门进阶专栏地址:https://blog.csdn.net/yao_hou/category_9951228.html?spm=1001.2014.3001.5482 本篇博客介绍如何使用qml来实现电池控件,效果图如下: 下面给出实现代码 Battery.qml /*电池组件*/import QtQuick 2.15 import QtQuick.Controls 2.15Rectangle {id: b…

音视频开发—使用FFmpeg将YUV文件编码成H264裸流文件 C语言实现

文章目录 1.准备工作2.压缩编码工作流程3.详细步骤1. 初始化日志和参数检查2. 输入/输出文件的打开3. 查找和初始化编码器4. 打开编码器5. 帧内存的分配和初始化6. 设置转换上下文&#xff08;SWS&#xff09;7. 读取和转换数据8. 编码过程9. 资源清理 4.完整示例代码 1.准备工…

熊海CMS漏洞练习平台的一次xss、sql注入、越权黑盒思路分析

简介 熊海CMS是由熊海开发的一款功能丰富的网站综合管理系统&#xff0c;广泛应用于个人博客、个人网站以及企业网站&#xff0c;本文章用于黑盒测试&#xff0c;如果需要「源码审计」后台回复【「CMS」】获取即可&#xff0c;精心准备了40多个cms源码漏洞平台&#xff0c;供宝…

在浏览器控制台中输出js对象,为什么颜色不同,有深有浅

打开console&#xff0c;输入自定义的javascript对象的时候&#xff0c;打开看发现对象的属性是深紫色&#xff0c;后面有一些对象是浅紫色的&#xff0c;比如Array对象和一堆SVG,HTML,CSS开头的对象&#xff0c;常用的prototype和__proto__也是浅紫色的。 请问这里深紫和浅紫…

什么是Maven以及如何配置Maven

T04BF &#x1f44b;专栏: 算法|JAVA|MySQL|C语言 &#x1faf5; 今天你敲代码了吗 文章目录 1.Maven1.1什么是Maven1.2Maven的好处1.3使用idea创建一个Maven项目1.4Maven的核心功能1.4.1项目构建 1.5Maven仓库1.5.2 中央仓库1.5.3 私有服务器(私服) 1.6Maven设置国内源 1.Mave…

[pytorch]常用函数(自用)

一、公共部分 1、torch.linespace 返回一维张量&#xff0c;在start和end之间&#xff08;包括start也包括end&#xff09;的均匀间隔的steps个点&#xff0c;长度为steps。 print(torch.linspace(1,10,3)) #输出tensor([ 1.0000, 5.5000, 10.0000]) print(torch.linspace…

文本分类--NLP-AI(八)

文本分类任务 任务简介1.字符数值化方式1方式2 2.池化&#xff08;pooling&#xff09;3.全连接层4.归一化函数&#xff08;Sigmoid&#xff09;5.总结 从任务抽象新的技术点Embedding层池化层 任务简介 任务介绍&#xff1a; 字符串分类&#xff0c;根据一句话的含妈量&#…

伊利25届校招24年社招网申入职北森测评题库全攻略!一文通!

伊利校招社招网申测评全攻略&#x1f680; 亲爱的求职小伙伴们&#xff0c;今天我要分享一份伊利校招社招网申测评的全攻略&#xff0c;希望能助你们一臂之力&#xff01; 测评概览 伊利的网申测评分为六个部分&#xff0c;总共约60分钟的答题时间&#xff0c;涵盖了言语逻辑、…

【微信小程序开发】如何定义公共的js函数,其它页面可以调用

在微信小程序开发中&#xff0c;可以通过以下步骤定义和使用公共的 JS 函数&#xff0c;使得其它页面可以调用&#xff1a; 1. 创建一个公共的 JS 文件&#xff1a;在项目的 utils 目录下创建一个 JS 文件&#xff0c;例如 utils/util.js。 2. 定义公共函数&#xff1a;在 uti…