乐趣区

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

jiezi

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

为了避免信息泄露，爱护版权，在前端咱们时常会用到水印。

当然，水印也有明水印和暗水印之分，明天咱们将的是前端实现明水印并实现全屏笼罩。

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

一、生成图片

因为不同页面大小不同，不同身份的人也应该设置不同的水印信息。这就须要咱们动静生成图片，这里就须要应用 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：明水印毕竟防小人不防君子，下期咱们就聊一聊暗水印是如何实现的。

退出移动版