如何给页面加水印

在utils里面创建一个watermark.js文件   

本人踩坑  :注意下

里面的onresize是事件在浏览器窗口被调整大小时发生

let watermark = {}
let setWatermark = (str, renderDom = document.body) => {
let id = '1.23452384164.123412415'
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
var can = document.createElement('canvas')
//水印的大小
can.width = document.body.clientWidth / 20
can.height = document.body.clientHeight / 10
let cans = can.getContext('2d')
cans.rotate(-15 * Math.PI / 180) //倾斜角度
cans.font = `${can.width / 5 + 'px Vedana'}`//水印字体大小
cans.fillStyle = 'red' // 水印的颜色
cans.textAlign = 'left'
cans.textBaseline = 'Middle'
cans.fillText(str, can.width / 3, can.height / 2)
let div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.top = '0px'
div.style.left = '0px'
div.style.position = 'fixed'
div.style.zIndex = '100000'
div.style.width = document.documentElement.clientWidth + 100000 + 'px'
div.style.height = document.documentElement.clientHeight + 100000 + 'px'
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)
renderDom.appendChild(div)
return id
}
// 该方法只允许调用一次
watermark.set = function (text, renderDom) {
console.log(123);
var id = setWatermark(text, renderDom)
if (!id) {
setTimeout(function () { watermark.set(text, renderDom) }, 0)
}
// onresize监听流浪器窗口的变化
// window.onresize = function () {
//
setWatermark(text,renderDom);
// };
}
// 在watermark.js文件中
const outWatermark = (id) => {
if (document.getElementById(id) !== null) {
const div = document.getElementById(id).remove()
div.style.visibility = 'hidden'
}
}
//
清除水印的方法
watermark.out = () => {
let str = '1.23452384164.123412415'
outWatermark(str)
// window.onresize = function () {
//
setWatermark();
// };
window.removeEventListener("resize", setWatermark);
}
export default watermark;

在要用到的vue文件引入

import watermark from "@/utils/canvas";

在mounted钩子函数中调用methods中的方法

mounted() {
this.onResize();
window.addEventListener("resize", this.onResize); //开启浏览器窗口的监听事件
},
methods: {
// 添加水印
onResize() {
// 添加水印
const loginUser = this.sessionData("get", "login_user");
watermark.set(loginUser.loginName);
document.oncontextmenu = new Function("event.returnValue=false;"); //禁用右键功能
document.onkeydown = new Function("event.returnValue=false"); //禁用F12
},
}

在beforeDestroy生命周期销毁钩子中调用清除水印就可以在离开当前页面的时候清除,如果用了keep-alive就在失活钩子中清除

 beforeDestroy() {
window.removeEventListener("resize", this.onResize); //清除浏览器窗口的监听事件
watermark.out(); //清除水印
document.oncontextmenu = new Function("event.returnValue=true;"); //禁用右键功能
},

最后

以上就是悲凉小丸子为你收集整理的如何给页面加水印的全部内容，希望文章能够帮你解决如何给页面加水印所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。