web页面--前端明水印

采用canvas绘制图片，observe监听页面元素改变重新添加。
实现一个这种水印：

<template><div id="water_mater" ref="Watermakr"></div> </template><script> export default {data() {return {}},methods: {createWaterMark() {const { loginIp = '', userName = '' } = this.userProfileconst angle = -22const txt = `水印内容`const canvas = document.createElement('canvas')canvas.width = 500canvas.height = 240const ctx = canvas.getContext('2d')ctx.clearRect(0, 0, 500, 240)ctx.fillStyle = '#000'ctx.globalAlpha = 0.3ctx.font = `14px serif`ctx.rotate((Math.PI / 180) * angle)ctx.fillText(txt, 90, 150)return canvas.toDataURL()},watchRemove() {const Watermakr = this.$refs.Watermakr// 观察器的配置（需要观察什么变动）const config = { attributes: true, childList: true, subtree: true }// 当观察到变动时执行的回调函数const callback = function(mutationsList, observer) {// 获取父组件 IDconst parentDom = document.getElementById('mainBox')// Use traditional 'for loops' for IE 11for (const mutation of mutationsList) {mutation.removedNodes.forEach(function(item) {if (item === Watermakr) {if (!document.getElementById('water_mater')) {parentDom.appendChild(Watermakr)}}})}}// 监听元素const targetNode = document.getElementById('mainBox')// 创建一个观察器实例并传入回调函数const observer = new MutationObserver(callback)// 以上述配置开始观察目标节点observer.observe(targetNode, config)}},mounted() {const Watermakr = this.$refs.WatermakrWatermakr.style.background= `url(${this.createWaterMark()}) center top`this.watchRemove()} } </script><style lang="scss" scoped> #water_mater {width: 100%;height: 100%;position: absolute; // 父组件要用相对定位 或者直接子组件固定定位，看需求top: 0px;right: 0px;bottom: 0px;left: 0px;pointer-events: none;background-repeat: repeat;z-index: 10; } </style>

更多请参考：
从破解某设计网站谈前端水印(详细教程)

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是生活随笔为你收集整理的web页面--前端明水印的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。