前端给网页添加明水印的解决办法

前端给网页添加明水印的解决办法

为了防止信息泄露,保护版权,在前端我们时常会用到水印。

当然,水印也有明水印和暗水印之分,今天我们将的是前端实现明水印并实现全屏覆盖。

创建一个水印图层,我们需要两步,一步是生成对应的图片,第二步是把图片放到最上层并全屏显示,最好还是按照格子状页面上显示多个水印内容。

一、生成图片

因为不同页面大小不同,不同身份的人也应该设置不同的水印信息。这就需要我们动态生成图片,这里就需要使用canvas

function createBackgroundImage(content, proportion, tiltAngle) {
   const can = document.createElement('canvas')
   can.width = document.body.clientWidth / proportion
   can.height = document.body.clientHeight / proportion

   const context = can.getContext('2d')
   context.rotate(-25 * Math.PI / 180);
   context.font = "800 30px Microsoft JhengHei";
   context.fillStyle = "#000";
   context.textAlign = 'center';
   context.textBaseline = 'Middle';
   context.fillText(content, 100, 100)
   
   return can.toDataURL("image/png")
  }

可以按照上面的方法创建canvas并填充文字。然后该函数返回一个对应的图片base64给我们。

这里需要注意一下该方法的入参(文字,填充比例,倾斜角度)虽然是按照比例设置的cancas宽高,却没有在fillText上做处理,实际应用的时候,如果适配不同尺寸屏幕还是需要自己再写一下的哈,同时还有文字的大小。

二、水印布局

布局相对简单一些,我们需要用到backgroundImage属性

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

之后,我们只需要再页面上添加一个div标签,并设置对应的样式,让它占据全屏就行。

下面再给一个简单示例




  
  
  
 Document
  


  
 

有兴趣的可以直接复制上面的代码看一下效果~

固然,稍微有点基础的可以通过打开控制台取消水印效果,这时候我们就需要监听dom的变化,这个我们后续再专门讲一下~

px:明水印毕竟防君子不防小人,下期我们就聊一聊暗水印是如何实现的。

你可能感兴趣的:(前端给网页添加明水印的解决办法)