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.rhkb.cn/news/224235.html

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

相关文章

EasyExcel使用: RGB字体,RGB背景颜色,fillForegroundColor颜色对照表

EasyExcel使用: RGB字体,RGB背景颜色,fillForegroundColor颜色对照表 使用EasyExcel导出表格可能会对字体颜色和单元格背景颜色进行自定义的修改。 可以自定义字体颜色或者每个单元格的颜色 要想自定义颜色,需要重写CellWriteHandler接口&am…

R语言中使用ggplot2绘制散点图箱线图,附加显著性检验

散点图可以直观反映数据的分布,箱线图可以展示均值等关键统计量,二者结合能够清晰呈现数据蕴含的信息。 本篇笔记主要内容:介绍R语言中绘制箱线图和散点图的方法,以及二者结合展示教程,添加差异比较显著性分析&#xf…

【prompt一】Domain Adaptation via Prompt Learning

1.Motivation 当前的UDA方法通过对齐源和目标特征空间来学习域不变特征。这种对齐是由诸如统计差异最小化或对抗性训练等约束施加的。然而,这些约束可能导致语义特征结构的扭曲和类可辨别性的丧失。 在本文中,引入了一种新的UDA提示学习范式&#xff0…

浅谈Dubbo核心概念及架构流程

浅谈Dubbo核心概念及架构流程 前言重要概念1、SPI2、ServiceBean3、URL4、Invoker 整体流程1、架构图2、调用链路 笔者碎碎言,我们学习Dubbo应该学的是什么? 笔者是一名业务开发,认为一切目的都要为我们的目标服务,即日常工作有帮…

天软特色因子看板 (2023.12 第14期)

该因子看板跟踪天软特色因子A06008聪明钱因子(beta)),该因子为以分钟行情价量信息为基础,识别聪明钱交易,用以刻画机构交易行为 值越大,越反映其悲观情绪,反之,反映其乐观情绪。 今日为该因子跟踪第14期&am…

对属于国家秘密的地理信息的获取、持有、提供、利用情况进行登记并长期保存,实行可追溯管理

对属于国家秘密的地理信息的获取、持有、提供、利用情况进行登记并长期保存,实行可追溯管理 数据记录(包括获取、持有、提供、利用、销毁等全闭环)

DataProcess-VOC数据图像和标签一起进行Resize

VOC数据图像和标签一起进行Resize 参加检测比赛的时候,很多时候工业原始数据尺度都比较大,如果对数据不提前进行处理,会导致数据在加载进内存时花费大量的时间,所以在执行训练程序之前需要将图像提前进行预处理。对于目标检测的数…

用友GRP-U8 UploadFile 文件上传漏洞

漏洞描述 用友GRP-U8行政事业内控管理软件是一款专门针对行政事业单位开发的内部控制管理系统,旨在提高内部控制的效率和准确性。该软件/UploadFile接口存在文件上传漏洞,跟上篇文章类似,同样可以通过任意文件上传恶意后门文件,从…

猫头虎分享2023年12月17日博客之星候选--领域赛道博主文章数据

猫头虎分享2023年12月17日博客之星候选–领域赛道博主文章数据 博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开…

java String转asc码,然后ascII再转四位的16进制数。

理论知识补充: Java中char是什么? 在Java中,char是一种数据类型,用于表示字符。字符是计算机中的最小单位,它可以是字母、数字、标点符号等。Java中的char类型占用16位,范围从0到65535,可以表示…

【svn】win11最新svn每天自动化定时update、commit,隐藏窗口,定时脚本编写

本文使用schtasks结合bat脚本实现全自动svn update以及commit操作。执行时隐藏cmd窗口,全自动后台执行。 执行脚本 写脚本参考了网上很多文章,但是这些文章的方法都有问题或者已经失效,比如: 老版本的bat脚本,使用v…

Python 爬虫之下载视频(五)

爬取第三方网站视频 文章目录 爬取第三方网站视频前言一、基本情况二、基本思路三、代码编写四、注意事项(ffmpeg)总结 前言 国内主流的视频平台有点难。。。就暂且记录一些三方视频平台的爬取吧。比如下面这个: 一、基本情况 这次爬取的方…

如何利用flume进行日志采集

介绍 Apache Flume 是一个分布式、可靠、高可用的日志收集、聚合和传输系统。它常用于将大量日志数据从不同的源(如Web服务器、应用程序、传感器等)收集到中心化的存储或数据处理系统中。 基本概念 Agent(代理): …

LaTex设置标题页、修改文字颜色和文字高亮

目录 一、标题页 1)常用的代码 2)添加脚注 二、修改文字颜色和文字高亮 1)设置文本的颜色 2)添加文本高亮 3)给文本添加有颜色的方框 一、标题页 主要的代码: \begin{titlepage} \noindent\fonts…

【计算机四级(网络工程师)笔记】操作系统运行机制

目录 一、中央处理器(CPU) 1.1CPU的状态 1.2指令分类 二、寄存器 2.1寄存器分类 2.2程序状态字(PSW) 三、系统调用 3.1系统调用与一般过程调用的区别 3.2系统调用的分类 四、中断与异常 4.1中断 4.2异常 🌈嗨&#xff…

【JMeter入门】—— JMeter介绍

1、什么是JMeter Apache JMeter是Apache组织开发的基于Java的压力测试工具,用于对软件做压力测试。它最初被设计用于Web应用测试,但后来扩展到其他测试领域。 (Apache JMeter是100%纯JAVA桌面应用程序) Apache JMeter可以用于对静…

idea structure视图介绍

作用 idea的Structure视图可以辅助查看代码结构 如何呼出Structure视图? Alt 7 Ctrl F12 侧边栏点Structure 我的常用配置 1、选Show Toolbar,便于使用功能按钮 2、使用Float视图,悬浮于窗口表面,可以使用 ShiftEsc来退出…

SpringMVC:整合 SSM 上篇

文章目录 SpringMVC - 03整合 SSM 上篇一、准备工作二、MyBatis 层1. dao 层2. service 层 三、Spring 层四、SpringMVC 层五、执行六、说明 SpringMVC - 03 整合 SSM 上篇 用到的环境: IDEA 2019(JDK 1.8)MySQL 8.0.31Tomcat 8.5.85Maven…

ModuleNotFoundError: No module named ‘sklearn.cross_validation‘

文章目录 报错信息报错原因解决方案 关注公众号:『AI学习星球』 算法学习、4对1辅导、论文辅导或核心期刊可以通过公众号或➕v:codebiubiu滴滴我 报错信息 ModuleNotFoundError: No module named sklearn.cross_validation 报错原因 这个cross_vali…

Redis数据库入门学习(下载与安装、常用命令、在Java中操作Redis)

简介 下载与安装 数据类型 常用命令 1.字符串操作命令 2.哈希操作命令 3.列表操作命令 push是将元素总是插入到第一个 0表示第一个,1表示第二个。-1表示倒数第一个,-2表示倒数第二个。当前命令的意思是第一个到倒数第一个,即就是全部元素 rpo…