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

Vue项目为页面添加水印效果

最近在做项目,有这样要求,需要在指定容器中添加水印,也可不设置容器,如果没有容器,则添加在整个页面中,即body,当接到这个需求的时候我第一想的方法就是用canvas来实现,话不多说搞起来。

实现方法

首先我们在utils文件中新建一个waterMark.js文件。

let watermark = {};
let setWatermark = (text, sourceBody) => {let id = 'watermark_fjq_' + parseInt(Math.random() * 100000);if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id));}//水印图片let can = document.createElement('canvas');can.width = 390; // 单个水印大小can.height = 180; // 单个水印大小let cans = can.getContext('2d');cans.rotate((-20 * Math.PI) / 180);cans.font = '14px Vedana';cans.fillStyle = 'rgba(200, 200, 200, 0.20)'; //水印颜色cans.textAlign = 'left';cans.textBaseline = 'Middle';cans.fillText(text, can.width / 20, can.height);//设置插入div样式let water_div = document.createElement('div');water_div.id = id;water_div.style.pointerEvents = 'none';water_div.style.overflow = 'hidden';water_div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';if (sourceBody) {sourceBody.style.position = 'relative';water_div.style.width = '100%';water_div.style.height = '100%';water_div.style.position = 'absolute';water_div.style.top = '0';water_div.style.left = '0';sourceBody.appendChild(water_div);} else {water_div.style.top = '3px';water_div.style.left = '200px';water_div.style.position = 'fixed';water_div.style.zIndex = '9999';water_div.style.width = document.documentElement.offsetWidth + 'px';water_div.style.height = document.documentElement.offsetHeight + 'px';document.body.appendChild(water_div);}return id;
};/***  该方法只允许调用一次*  @param:*  @text == 水印内容*  @sourceBody == 水印添加在哪里,不传就是body* */
watermark.set = (text, sourceBody) => {setTimeout(() => {setWatermark(text, sourceBody);}, 1000); //延迟加载
};export default watermark;

使用方法

在main.js 中引入 waterMark.js。

// 引入水印文件地址
import watermark from '@/utils/waterMark'
Vue.prototype.$watermark = watermark

 如果我们在指定页面中使用:

this.$watermark.set(text,dom)
参数说明是否必填
text水印内容
dom水印容器。若不传,则全屏水印,若传,则指定容器。

比如,在指定容器水印: 

<template><div class="page"><div ref="content"></div></div>
</template><script>
export default {data() {return {};},mounted(){this.$watermark.set("码云笔记",this.$refs.content)},beforeDestroy() {this.$watermark.set("",this.$refs.content);}
};
</script>

 我这里需要给整个项目页面添加水印,所以在App.vue文件中引入:

<template><router-view />
</template><script>
export default {name: 'App',data() {return {};},mounted() {this.$watermark.set('码云笔记');},beforeDestroy() {this.$watermark.set('');},
};
</script>

 结语

以上就是我在Vue项目为页面添加水印效果,都是实际项目中使用过的,大家可以直接CV使用,如果大家有更好的方法,欢迎留言交流。

相关文章:

Vue项目为页面添加水印效果

最近在做项目&#xff0c;有这样要求&#xff0c;需要在指定容器中添加水印&#xff0c;也可不设置容器&#xff0c;如果没有容器&#xff0c;则添加在整个页面中&#xff0c;即body&#xff0c;当接到这个需求的时候我第一想的方法就是用canvas来实现&#xff0c;话不多说搞起…...

两数之和

给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返回…...

试过GPT-4V后,微软写了个166页的测评报告,业内人士:高级用户必读

一周之前&#xff0c;ChatGPT迎来重大更新&#xff0c;不管是 GPT-4 还是 GPT-3.5 模型&#xff0c;都可以基于图像进行分析和对话。与之对应的&#xff0c;多模态版GPT-4V模型相关文档也一并放出。当时 OpenAI 放出的文档只有18页&#xff0c;很多内容都无从得知&#xff0c;对…...

使用Python构造VARIMA模型

简介 VARMA(p,q)结合了VAR和VMA模型&#xff0c;其中p是向量自回归(VAR)模型的滞后期数&#xff0c;q是VMA模型的移动平均的阶数。 VARMA是ARMA的推广&#xff0c;它将ARMA模型扩展到多个时间序列变量的情况&#xff0c;通过VAR和VMA的线性组合来描述多个时间序列变量之间的联…...

Java基于SpringBoot+Vue的考研资讯平台

1 简介 大家好&#xff0c;我是程序员徐师兄&#xff0c;今天为大家带来的是Java基于SpringBootVue的考研资讯平台 Java基于SpringBoot的考研资讯平台&#xff0c;在系统当中学生可以根据不同的信息来实现该网站的考研资讯平台信息的管理。 系统主要分为前台和后台。主要包括…...

信钰证券:9月以来A股20家银行 获机构不同批次调研

Wind数据显现&#xff0c;自9月份以来&#xff0c;已经有20家银行获安排不同批次调研。其间常熟银行、瑞丰银行被调研次数较多&#xff0c;别离为20次、11次&#xff1b;宁波银行、渝农商行获安排调研家数居前&#xff0c;别离为206家、128家。从上市银行宣布的调研情况来看&am…...

应用商店优化的好处有哪些?

应用程序优化优势包括应用在商店的可见性和曝光度&#xff0c;高质量和被相关用户的更好发现&#xff0c;增加的应用下载量&#xff0c;降低用户获取成本和持续增长&#xff0c;增加应用收入和转化率以及全球受众范围。 1、提高知名度并在应用商店中脱颖而出。 如果用户找不到…...

MacOS Pro笔记本硬盘升级纪实

背景 MacPro 2015 mid的苹果本&#xff0c;忽然心血来潮想升级一下SSD。三个步骤&#xff1a;做启动盘&#xff0c;时间机器备份&#xff0c;插新的SSD盘恢复。 过程 下载MacOS&#xff0c;macOS Monterey 12.7官方原版镜像&#xff1a; https://swcdn.apple.com/content/do…...

景联文科技:3D点云标注应用场景和专业平台

3D点云技术之所以得到广泛发展和应用&#xff0c;主要是因为它能够以一种直观、真实和全面的方式来表示和获取现实世界中的三维信息。 3D点云的优势&#xff1a; 真实感和立体感&#xff1a;3D点云数据能够呈现物体的真实感和立体感&#xff0c;使观察者能够更直观地理解物体的…...

基于R语言的水文、水环境模型优化技术及快速率定方法

【阅读原文】&#xff1a;基于R语言的水文、水环境模型优化技术及快速率定方法与多模型案例实践 【内容简介】&#xff1a; 专题一、最速上升法、岭分析以及响应曲面模型 1.最速上升路径 2.信赖域 3.响应面模型 4.二阶响应面 5.岭分析 专题二、Kriging插值与优化方法 …...

学习网络安全得多少费用?网络安全入门了解

前言 网络安全是指对网络系统、硬件、软件和系统数据的保护。不因偶然或者其它原因导致破坏、更改和数据泄露情况。确保网络安全&#xff0c;防止网站被攻击、系统被病毒感染等。随着网络的快速发展&#xff0c;越来越多的用户和公司认识到网络安全的重要性&#xff0c;许多人…...

记录一次线上fullgc问题排查过程

某天&#xff0c;接到测试部门反馈说线上项目突然很快&#xff0c;由于当前版本代码和上一版本相比就多了一个刚上线了一个5分钟1次的跑批任务&#xff0c;先关闭次任务后观察是否卡顿&#xff0c;并检查堆内存是否使用完造成频繁gc 1.通过jmap命令查看堆内存中的对象 2.生成当…...

设计接口应该考虑的因素以及遵循的原则

设计接口应该考虑的因素&#xff1a; 接口的业务定位 接口的安全性 接口的可扩展性 接口的稳定性 接口的跨域性 接口的协议规则 接口的路径规则 接口单一原则 接口过滤及接口组合 1.职责原则 在设计接口时&#xff0c;必须明确接口的职责&#xff0c;即接口类型&…...

【产品】智能结构仿真软件AIFEM 2023R2新版本功能介绍

AIFEM是由天洑自主研发的一款通用的智能结构仿真软件&#xff0c;助力用户解决固体结构相关的静力学、动力学、振动、热力学等实际工程问题&#xff0c;软件提供高效的前后处理工具和高精度的有限元求解器&#xff0c;帮助用户快速、深入地评估结构的力学性能&#xff0c;加速产…...

displaty:none与visibility:hidden的区别

...

探索数据库的世界:DB、DBMS、DBA、DBS的全面介绍

目录 DB数据库(Database) DBMS数据库管理系统(Database Management System): DBA数据库管理员(Database Administrator): DBS数据库系统(Database System) 总结: DB数据库(Database) 概念&#xff1a; 存储数据的集合&#xff0c;DB可以包含各种类型的数据&#xff0c;文…...

【JVM】初步认识Java虚拟机

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaEE 操作系统 Redis 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 JVM 一、初识JVM1.1 什么是JVM1.2 JVM的功能…...

JAVA设计模式-模板模式

一.概念 定义一个操作中的算法的骨架&#xff0c;而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 ​ 使用了JAVA的继承机制&#xff0c;在抽象类中定义一个模板方法&#xff0c;该方法引用了若干个抽象方法&#xff0…...

day007

删除链表第n个节点 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val …...

Spring Boot项目在Windows上的自启动策略与Windows自动登录配置

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一&#xff1a;yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因&#xff0c;后面把yaml.safe_dump直接替换成yaml.dump&#xff0c;确实能保存&#xff0c;但出现乱码&#xff1a; 放弃yaml.dump&#xff0c;又切…...

简单介绍C++中 string与wstring

在C中&#xff0c;string和wstring是两种用于处理不同字符编码的字符串类型&#xff0c;分别基于char和wchar_t字符类型。以下是它们的详细说明和对比&#xff1a; 1. 基础定义 string 类型&#xff1a;std::string 字符类型&#xff1a;char&#xff08;通常为8位&#xff09…...