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

47次阅读

共计 2144 个字符,预计需要花费 6 分钟才能阅读完成。

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

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

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

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

一、生成图片

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

正文完
 0