Vue在页面上添加水印

第一步:在自己的项目里创建一个js文件;如图所示我在在watermark文件中创建了一个名为waterMark.js文件。

waterMark.js

/**  水印添加方法  */
let setWatermark = (str1, str2) => {let id = '1.23452384164.123412415'if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id))}let can = document.createElement('canvas')// 设置canvas画布大小can.width = 800can.height = 250let cans = can.getContext('2d')cans.rotate(-10 * Math.PI / 180) // 水印旋转角度cans.font = '26px Vedana'cans.fillStyle = '#333333'cans.textAlign = 'center'cans.textBaseline = 'Middle'cans.fillText(str1, can.width / 2, can.height) // 水印在画布的位置x,y轴cans.fillText(str2, can.width / 2, can.height + 30)let div = document.createElement('div')div.id = iddiv.style.pointerEvents = 'none'div.style.top = '140px'div.style.left = '0px'div.style.opacity = '0.3'div.style.position = 'fixed'div.style.zIndex = '100000'div.style.width = document.documentElement.clientWidth + 'px'div.style.height = document.documentElement.clientHeight  + 'px'div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'document.body.appendChild(div)return id
}// 添加水印方法
export const setWaterMark = (str1, str2) => {let id = setWatermark(str1, str2)if (document.getElementById(id) === null) {id = setWatermark(str1, str2)}
}// 移除水印方法
export const removeWatermark = () => {let id = '1.23452384164.123412415'if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id))}
}

第二步:在要添加水印的页面导入

import { removeWatermark, setWaterMark } from "@/../../waterMark"; //根据自己文件路径修改

第三步:在mounted参数协商这几行代码

mounted() {//设置水印内容,这段代码实现的是两行文本内容的水印。let str1 = "我是水印";let str2 = sessionStorage.getItem(key1)setWaterMark(str1, str2);
},
destroyed() {removeWatermark();},
//sessionStorage.getItem(key1)可以获取当前登陆用户的信息,自己根据需要进行修改即可。

 按照这三部就可以实现。

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

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

相关文章

【MYSQL】MYSQL 的学习教程(六)之 SQL 语句执行流程

1. 一条 SQL 查询语句是如何被执行的 MySQL 的基本架构示意图如下所示: MYSQL 线程处理请求流程: SQL 接口:MySQL 中处理请求的线程在获取到请求以后获取 SQL 语句去交给 SQL 接口去处理查询解析器:解析器会将 SQL 接口传递过来…

mysql高级查询

当涉及到"高级查询"时,通常指的是使用SQL语言进行复杂的数据查询,包括多表连接、聚合函数、子查询、联合查询和条件筛选等。 多表连接查询: SELECT customers.customer_name, orders.order_number FROM customers JOIN orders ON…

操作系统期末复习知识点二计算与应用

1.理解银行家算法判断死锁的定理并能计算相关的参数。 2.能利用LRU、FIFO算法求缺页率。 3.纯页式管理中,求逻辑地址对应的物理地址,页号、页内地址长度,画出逻辑地址的格式,在引入块表时,求出有效访问时间。 4.可变分…

【Java】SpringBoot快速整合Kafka

目录 1.什么是Kafka? 主要特点和概念: 主要组成部分: 2.Kafka可以用来做什么? 3.SpringBoot整合Kafka步骤: 1. 添加依赖: 2. 配置 Kafka: 3. 创建 Kafka 生产者: 4. 创建 Kafka 消费者: 5. 发布消息: 6. 使…

【MySQL学习笔记007】约束

1、概述 (1)概念:约束是作用于表中字段上的规则,用于限制存储在表中的数据。 (2)目的:保证数据库中数据的正确、有效性和完整性。 (3)分类 约束 描述 关键字 …

【各种**问题系列】Java 数组集合之间的相互转换

📌 问题点: 在 Coding 过程中经常会遇到数组、List、Set、Map 之间的相互转换......这里记录一下转换的几种方式。😶😶😶 目录 📌 集合转换 1.数组 转 List: 2.List 转 数组: 3…

如何将本地websocket发布至公网并实现远程访问服务端

文章目录 1. Java 服务端demo环境2. 在pom文件引入第三包封装的netty框架maven坐标3. 创建服务端,以接口模式调用,方便外部调用4. 启动服务,出现以下信息表示启动成功,暴露端口默认99995. 创建隧道映射内网端口6. 查看状态->在线隧道,复制所创建隧道的公网地址加端口号7. 以…

AG16KDDF256 User Manual

AGM AG16KDDF256 是由 AGM FPGA AG16K 与 DDR-SDRAM 叠封集成的芯片,具有 AG16K FPGA的可编程功能,提供更多可编程 IO,同时内部连接大容量 DDR-SDRAM。  FPGA 外部管脚 FBGA256 封装,管脚说明请见下表 Table-1: Tab…

YUM和编译安装

一、安装Linux 1.编译安装,灵活性高,难度较大,可以安装较新的版本 2.rpm安装(redhat) linux包安装 rpm 软件名 3.yum yum是rpm升级版本,解决了rpm的弊端 2和3用的都是红帽打包好的软件包,能…

cad安装路径显示灰色选择不了怎么办?

cad安装路径显示灰色选择不了怎么办呢?今天教给大家。 灰色是因为之前下载过一次,没有删干净,注册表里还有cad,它认为你的电脑中有cad,所以安装路径是灰色的,不能安装。先同时按下【xinR】键,打…

ip addr和ifconfig

ip addr可以显示更多信息,包括为启动的网络驱动如wlan,而ifocnfig只显示在线的驱动。若wlan是down的,则ip addr会显示信息,ifconfig不会显示信息。 ip addr: ifconfig:

机器学习之数据扩充

为什么要进行数据扩充 数据扩充在机器学习中扮演着重要的角色,原因如下: 1. 解决数据稀缺问题: 数据量不足: 在实际应用中,获取大量高质量标记数据可能很困难或昂贵。数据扩充能帮助充分利用有限数据集,增加训练数据数量,减少模型过拟合风险。2. 提高模型泛化能力: 增…

视频号视频怎么保存到手机相册?

在微信视频号中看到喜欢的视频,想要缓存下载到手机,却怎么也找不到办法。很多朋友会选择去录屏,但保存下来的视频实在是不美观,而且费时费力!着实没必要!下面给大家推荐一款亲测有效的微信视频号视频下载方…

【excel密码】Excel工作表不能复制或移动

为什么excel文件打开之后,工作表里是可以编辑的,但是想要移动工作表或者复制、重命名等操作,这是什么原因?其实这是因为设置了工作簿保护,设置了保护的工作簿无法对整张工作表进行操作。 想要取消这种保护,…

算法——哈希表

哈希表简介 **是什么:**存储数据的容器有什么用:快速查找某个元素,时间复杂度O(1),空间复杂度O(n)**什么时候使用哈希表:**频繁查找某一个数(这里不要忘了之前的二分,时间复杂度O(logN)&#x…

opencv入门到精通——图像平滑

目录 目标 2D卷积(图像过滤) 图像模糊(图像平滑) 1.平均 2.高斯模糊 3.中位模糊 4.双边滤波 目标 学会: 使用各种低通滤镜模糊图像 将定制的滤镜应用于图像(2D卷积) 2D卷积&#xff0…

Unity网格篇Mesh(一)

Unity网格篇Mesh(一) 本文的目标1.渲染仔细看下面的图你会发现,锯齿状 2.创建网格顶点4 x 2网格网格的顶点 3.创建网格网格只在Play模式下显示逆时针和顺时针三角形第一个三角面一个四边形由两个三角面组成第一个四边形填充剩余网格 接下一篇…

【论文阅读笔记】SegVol: Universal and Interactive Volumetric Medical Image Segmentation

Du Y, Bai F, Huang T, et al. SegVol: Universal and Interactive Volumetric Medical Image Segmentation[J]. arXiv preprint arXiv:2311.13385, 2023.[代码开源] 【论文概述】 本文思路借鉴于自然图像分割领域的SAM,介绍了一种名为SegVol的先进医学图像分割模型…

c++ qt QtWidgetsApplication 项目 使用外部ui

1 包含生成的UI头文件: 例如,如果你的Qt Designer的.ui文件名为test.ui,那么生成的头文件通常为ui_test.h。 #include "ui_test.h"2 实例化UI类:.h文件中实例化ui 在你的主要类的头文件中,你通常会声明一个U…

Python 计算时间间隔

from datetime import datetime# 开始时间 starttime datetime.now()import time time.sleep(5)# 结束时间 endtime datetime.now()time_span endtime - starttime print(type(time_span))print(时间间隔:, time_span.days) print(时间间隔:, time_sp…