1.创建warterMark.js

javascript">/*水印配置*/
//声明 
let watermark = {}
//水印配置 
let setWatermark = (str1, str2, str3) => {let id = '1.23452384164.123412415'// 移除水印 判断if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id))}//创建画布let createCanvas = document.createElement('canvas')// 设置canvas画布大小createCanvas.width = 280 //宽度createCanvas.height = 220 //高度//创建Context2D对象作为2D渲染的上下文。let Context2D = createCanvas.getContext('2d')/*水印样式调整配置*/Context2D.font = '16px Vedana' //水印文字大小Context2D.fillStyle = '#000' //水印颜色 HEX格式,可使用red 或者rgb格式// 平移并斜着展示整个水印Context2D.translate(createCanvas.width / 2, createCanvas.height / 2)Context2D.rotate(-Math.PI / 6)// 第一段文字（较长）Context2D.fillText(str1, -Context2D.measureText(str1).width / 2, 0)// 第二段文字（较短）Context2D.font = '16px Vedana' // 可根据需要调整第二段文字的大小Context2D.fillText(str2, -Context2D.measureText(str2).width / 2, 30)// 第三段文字Context2D.font = '14px Vedana' // 可根据需要调整第三段文字的大小Context2D.fillText(str3, -Context2D.measureText(str3).width / 2, 60)//创建元素let createDiv = document.createElement('div')createDiv.id = id//水印默认设置createDiv.style.pointerEvents = 'none' //水印层事件穿透 让水印不阻止交互事件createDiv.style.top = '0px' //水印顶部距离createDiv.style.left = '0px' //水印左侧距离createDiv.style.opacity = '0.05' //水印透明度createDiv.style.position = 'fixed' //水印定位createDiv.style.zIndex = '100000' //水印样式优先显示createDiv.style.width = document.documentElement.clientWidth - 100 + 'px' //水印宽度createDiv.style.height = document.documentElement.clientHeight - 100 + 'px' //水印高度createDiv.style.background = 'url(' + createCanvas.toDataURL('image/png') + ') left top repeat' //水印显示(关键代码)document.body.appendChild(createDiv) //在指定元素节点的最后一个子节点之后添加节点return id
}// 此方法只允许调用一次
watermark.set = (str1, str2, str3) => {let id = setWatermark(str1, str2, str3)//设置间隔setInterval(() => {if (document.getElementById(id) === null) {id = setWatermark(str1, str2, str3)}}, 500)//改变大小时执行window.onresize = () => {setWatermark(str1, str2, str3)}
}export default watermark

2.在App.vue中引入

javascript">import Watermark from "../src/utils/warterMark";
//需要在watch里监听路由的变化从而重新加载水印watch: {$route(to, from) {//我是直接通过本地存储取得数据进行水印加载的也可以自定义let userObj = JSON.parse(localStorage.getItem("userInfo"));let companyName = userObj.tenantName;let userName = userObj.userName;let timer = userObj.loginDate.match(/^\d{4}-\d{2}-\d{2}/)[0];this.$nextTick(function () {//Watermark.set(companyName, userName, timer); //使用本地存储中的数据渲染Watermark.set('水印1', '水印2', '水印3'); //自定义数据渲染});},},//需要在页面加载完成后进行水印加载mounted() {let userObj = JSON.parse(localStorage.getItem("userInfo"));let companyName = userObj.tenantName;let userName = userObj.userName;let timer = userObj.loginDate.match(/^\d{4}-\d{2}-\d{2}/)[0];// Watermark.set(companyName, userName, timer); //使用本地存储中的数据渲染Watermark.set('水印1', '水印2', '水印3'); //自定义数据渲染},