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= `}) 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页面--前端明水印的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。