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

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

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

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

一、生成图片

因为不同页面大小不同，不同身份的人也应该设置不同的水印信息。这就需要我们动态生成图片，这里就需要使用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标签，并设置对应的样式，让它占据全屏就行。

下面再给一个简单示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
  <style>
  #content {
   width: 100%;
   height: 100vh;
   margin-left: auto;
   margin-right: auto;
   background: cadetblue;
   overflow: hidden;
  }
 </style>
</head>
<body>
  <div id="content">
 </div>
  <script>
  function createBackgroundImage(content, proportion, tiltAngle) {
   const can = document.createElement('canvas')
   can.width = document.body.clientWidth / proportion
   can.height = document.body.clientHeight / proportion
   console.log('can.width', can.width)
   console.log('can.height', can.height)
   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")
  }
  const div = document.getElementById('content')
  console.log('div', div)
  div.style.backgroundImage = `url(${createBackgroundImage('伯约同学', 6, 10)})`
 </script>
</body>

</html>

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

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

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