likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 25

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

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

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

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

一、生成图片

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

转载自:https://segmentfault.com/a/1190000041395606
评论
请登录