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.hqwc.cn/news/299032.html

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

相关文章

WPF中数据绑定转换器Converter

使用场景:ViewModel中的数据如果跟View中的数据类型不匹配。 下面是以int类型调控是否可见为例子 步骤一:创建转换器类 在xaml中查看Converter的定义可以知道Converter是一个接口类型,因此转换器的类定义需要使用这个接口 internal class Vi…

计算机视觉技术-使用图像增广进行训练

让我们使用图像增广来训练模型。 这里,我们使用CIFAR-10数据集,而不是我们之前使用的Fashion-MNIST数据集。 这是因为Fashion-MNIST数据集中对象的位置和大小已被规范化,而CIFAR-10数据集中对象的颜色和大小差异更明显。 CIFAR-10数据集中的前…

如何使用Docker部署Dashy并无公网ip远程访问管理界面

文章目录 简介1. 安装Dashy2. 安装cpolar3.配置公网访问地址4. 固定域名访问 简介 Dashy 是一个开源的自托管的导航页配置服务,具有易于使用的可视化编辑器、状态检查、小工具和主题等功能。你可以将自己常用的一些网站聚合起来放在一起,形成自己的导航…

不同参数规模大语言模型在不同微调方法下所需要的显存总结

原文来自DataLearnerAI官方网站: 不同参数规模大语言模型在不同微调方法下所需要的显存总结 | 数据学习者官方网站(Datalearner)https://www.datalearner.com/blog/1051703254378255 大模型的微调是当前很多人都在做的事情。微调可以让大语言模型适应特定领域的任…

WordPress主题大前端DUX v8.3源码下载

DUX主题8.3版本更新内容: 新增:Cloudflare Turnstile 免费验证功能 新增:子菜单页面模版,支持多级页面 新增:手机端文章内表格自动出现横向滚动条,可集体或单独设置滚动宽度 新增:标签云页面模版…

springboot 共享自习室座位管理系统 -计算机毕业设计源码55732

摘 要 随着互联网趋势的到来,各行各业都在考虑利用互联网将自己推广出去,最好方式就是建立自己的互联网系统,并对其进行维护和管理。在现实运用中,应用软件的工作规则和开发步骤,采用Java技术建设共享自习室座位管理系…

零基础入门网络安全必看的5本书籍(附PDF)

书中自有黄金屋,书中自有颜如玉。很多人学习一门技术都会看大量的书籍,经常也有朋友询问:零基础刚入门,应该看哪些书?应该怎么学?等等问题。今天就整理了5本零基础入门网络安全必看书籍,希望能帮…

overleaf 支持中文

基本操作 左上角menu中,切换compiler 到xelatex。 然后在\documentclass声明下面加一个 \usepackage{ctex}。 使用\usepackage{xecjk}可能也可以,但会有警告。 警告分析 Font “FandolSong-Regular” does not contain requested Script “CJK”。 网上…

关于标准那些事——第五篇 两仪

国家标准的编写,对于标准的名称和结构,很多人往往是不那么在意的,但这恰恰也是非常重要的点,今天就给大家分享一下这太极所生的“两仪”。我会用最精简的文字概括出核心内容,让大家有一个初步且完整的概念,…

什么是OAuth2.0

前言 OAuth(Open Authorization)是一个关于授权(authorization)的开放网络标准,允许用户授权第三方应用访问他们存储在另外的服务提供者上的信息,而不需要将用户名和密码提供给第三方移动应用或分享他们数…

亚信安慧AntDB数据库:引领数据库标准与性能规范,推动行业创新

近日,全国信息技术标准化技术委员会数据库标准工作组在一场重要的研讨会上召开,旨在交流并总结2023年上半年数据库标准编制情况。我国自主研发的AntDB数据库,作为国内最早的国产数据库产品之一,受邀参与了此次标准的研讨&#xff…

1-1,ZZ004 新型电力系统运行与维护赛题第一套

2023年全国职业院校技能大赛中职组 “新型电力系统运行与维护” 竞 赛 任 务 书 01 第一部分 竞赛须知 竞赛总分为100分,完成时间为7小时。 一、竞赛纪律要求 (一)正确使用设备与工具,严格遵守操作安全规范。 (二)竞赛过程中遇到任何问题,必须向现场裁判举牌示意,不…