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>

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

web页面--前端明水印相关推荐

前端明水印到隐水印你了解了吗
前言水印的目的是为了防止信息泄漏,保护版权,在很多网站里都有用到了水印,水印真的只是看到的这么简单吗? 接触到水印相关知识是因为一个需求,也是因为这个需求给我打开了水印相关的大门.当时有个需求是给一 ...
给你的web页面添加盲水印，附带检盲水印方案
应用场景在一些敏感系统有的时候我们为了防止别人截图或追溯图片源头是谁发的.我们需要在页面上埋下我们的隐形水印. 开始做埋水印 github上有很多水印的js插件,download下来一个改一改,源 ...
如何给web页面添加一个水印
微信搜一搜 "胖蔡话前端" 前端公众号,关注更多前端咨询.欢迎访问个人博客[EnjoyToday.cn)(http://www.enjoytoday.cn) 水印原理我们经常看到 ...
Web页面适配移动端方案研究
源宝导读:由于我们ERP目前大都是在在PC上面运行,大家现在关注移动端比较少,谈到移动端适配时,可能都有些生疏也可能比较好奇.以前做过一些移动端的little项目,那么借助这次分享的机会,和大家一起讨 ...
1w字详解从破解某定设计网站谈前端明暗水印(推荐收藏)
前言最近在写公众号的时候,常常会自己做首图,并且慢慢地发现沉迷于制作首图,感觉扁平化的设计的真好好看.慢慢地萌生了一个做一个属于自己的首图生成器的想法. 制作呢,当然也不是拍拍脑袋就开始,在开始之前 ...
html页面怎么加水印,Web 页面如何添加水印？
1. 代码开发版实现方法常规代码实现思路是: 1)web 页面加载后,通过 javascript 创建页面元素 div,并在 div 元素中创建文本节点,展示水印内容 2)设置 div 元素样式,将 ...
前端给页面添加暗水印的办法
前端给页面添加暗水印的办法上一篇文章讲到了在页面上添加明水印的方法,但是明水印比较好清除,而且对于一些没做处理的图片,当用户直接保存的时候,是没有水印的,这时候信息泄露问题依然存在.为了解决这样的问 ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...
如何把python可视化到前端_python数据可视化的效果如何在web页面中展示_北京可视化股票...
有什么APP可以展示可视化的任务进度可视化任务进度软件,使用敬业签,具体可视有事项开始时间,进度及人.还有结束时间以及人员处理速等等,更多功能如下: 1.敬业签是一款功能比较全面的桌面便签软件,分为 ...

web页面--前端明水印

web页面--前端明水印相关推荐

最新文章

热门文章