VUE项目前端页面添加水印

前段时间看到别人的页面有当前登录人的姓名水印,后面在网上学习了一下,故在这记录一下

1,创建一个放水印的元素

 2,通过canvas创建图片,以背景图的方式实现水印

    getWater() {
      const canvas = document.getElementById("canvas");//获取canvas
      canvas.width = 200;//设置画布宽度
      canvas.height = 200;//设置画布高度
      canvas.style.display = "none";//隐藏画布本身
      const ctx = canvas.getContext("2d");//获取画笔
      ctx.font = "16px";设置文字大小
      ctx.fillStyle = "rgba(0,0,0,.3)";//设置文字颜色及透明度
      ctx.rotate(-0.4);//设置文字旋转角度
      ctx.fillText("这是水印", canvas.width / 6, canvas.height / 2);//设置显示文字内容
      const img = canvas.toDataURL("image/png");//参数默认为 image/png,可以是其他image/jpeg等,该方法返回值是一个url,是base64组成的图片的源数据、可以直接赋值给图片的src属性
      const style = `background-image:url(${img});`;//定义样式
      water.setAttribute("style", style);//给要添加水印的元素设置样式
    }

3,通过样式,使有水印的元素布满屏,并处于最上层

  #water{
    width: 100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    pointer-events: none;
  }

pointer-events: none;表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西,说白了,就是让标签不接受鼠标事件(含click,mousemove,mouseup之类的)。

这个时候,页面水印就有了

 但是这样有个问题,内行人会打开控制台,找到带有水印的这个元素,把他的背景图取消勾选,这样页面水印就木的了

 有一个办法可以解决,通过MutationObserver监听一下dom元素的变化

 

 可以理解为当监听到id名为water的元素样式发生变化时,通过回调函数再调用一下设置水印的方法

MutationObserver传送门:MutationObserver 监听DOM变化_独孤孤独嘟咕噜轱辘将军'的博客-CSDN博客

评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值