文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

MutationObserver在页面水印实现起到的作用是什么

2023-07-02 15:39

关注

这篇文章主要介绍“MutationObserver在页面水印实现起到的作用是什么”,在日常操作中,相信很多人在MutationObserver在页面水印实现起到的作用是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”MutationObserver在页面水印实现起到的作用是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

实现水印

其实实现水印并不难,只需要利用自定义指令 + canvas + background-image即可,实现起来也非常方便:

import type { Directive, App } from 'vue'interface Value {  font?: string  textColor?: string  text?: string}const waterMarkId = 'waterMark'const canvasId = 'can'const drawWatermark = (el, value: Value) => {  const {    font = '16px Microsoft JhengHei',    textColor = 'rgba(180, 180, 180, 0.3)',    text = '三心大菜鸟',  } = value  // 创建一个canvas标签  const canvas = document.getElementById(canvasId) as HTMLCanvasElement  // 如果已有则不再创建  const can = canvas || document.createElement('canvas')  can.id = canvasId  el.appendChild(can)  // 设置宽高  can.width = 400  can.height = 200  // 不可见  can.style.display = 'none'  const ctx = can.getContext('2d')!  // 设置画布的样式  ctx.rotate((-20 * Math.PI) / 180)  ctx.font = font  ctx.fillStyle = textColor  ctx.textAlign = 'left'  ctx.textBaseline = 'middle'  ctx.fillText(text, can.width / 3, can.height / 2)  // 水印容器  const waterMaskDiv = document.createElement('div')  waterMaskDiv.id = waterMarkId  // 设置容器的属性样式  // 将刚刚生成的canvas内容转成图片,并赋值给容器的 background-image 样式  const styleStr = `    width: 100%;    height: 100%;    position: fixed;    z-index: -1;    top: 0;    left: 0;    pointer-events: none;    background-image: url(${can.toDataURL('image/png')})  `  waterMaskDiv.setAttribute('style', styleStr)  // 将水印容器放到目标元素下  el.appendChild(waterMaskDiv)  return styleStr}const watermarkDirective: Directive = {  mounted(el, { value }) {    // 接收styleStr,后面可以用来对比    el.waterMarkStylestr = drawWatermark(el, value)  }}

使用的时候直接以v-watermark来使用:

<div     v-watermark="    {     text: '水印名称',    textColor: 'rgba(180, 180, 180, 0.3)'     }    "  >

得到的效果如下:

MutationObserver在页面水印实现起到的作用是什么

恶意修改

咱们完成了水印功能,但是咱们来想一想,水印有啥用?或者说我们为什么要给一个页面加水印呢?答案就是:防伪

是的,我们的水印是用来防伪的,但是像我们刚刚那么做真的能防伪吗?我们回忆一下我们刚刚的加水印思路:

看似完成了水印功能,但是其实破绽百出!!!比如:

MutationObserver在页面水印实现起到的作用是什么

MutationObserver在页面水印实现起到的作用是什么

如果一切别有用心的人做了这两件事,这都会导致我们页面上刚刚所做的水印直接消失!!!

MutationObserver在页面水印实现起到的作用是什么

所以咱们得监控这些人的恶意行为,那咋做呢?MutationObserver出场了!!!

MutationObserver

MutationObserver的具体用法大家可以去MDN上看,这里我就简言意骇地说一下他的作用:监控DOM元素的变化

是的,它的作用就是:监控DOM元素的变化,所以他能阻止那些恶意用户破坏水印,因为我们刚刚说了,恶意用户可以使用以下两种方法进行破坏水印:

而这两点都涉及到DOM的修改,所以都会引起MutationObserver的监控触发,所以咱们可以利用MutationObserevr来监控。这里用到它的实例的两个方法:

const watermarkDirective: Directive = {  mounted(el, { value }) {    // 接收styleStr,后面可以用来对比    el.waterMarkStylestr = drawWatermark(el, value)    // 先定义一个MutationObserver    el.observer = new MutationObserver(() => {      const instance = document.getElementById(waterMarkId)      const style = instance?.getAttribute('style')      const { waterMarkStylestr } = el      // 修改样式 || 删除div      if ((instance && style !== waterMarkStylestr) || !instance) {        if (instance) {          // div还在,说明只是修改style          instance.setAttribute('style', waterMarkStylestr)        } else {          // div不在,说明删除了div          drawWatermark(el, value)        }      }    })    // 启动监控    el.observer.observe(document.body, {      childList: true,      attributes: true,      subtree: true,    })  },  unmounted(el) {    // 指定元素销毁时,记得停止监控    el.observer.disconnect()    el.observer = null  },}

到此,关于“MutationObserver在页面水印实现起到的作用是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯