前端给网页添加明水印的解决办法
前端给网页添加明水印的解决办法
为了防止信息泄露，保护版权，在前端我们时常会用到水印。
当然，水印也有明水印和暗水印之分，今天我们将的是前端实现明水印并实现全屏覆盖。
创建一个水印图层，我们需要两步，一步是生成对应的图片，第二步是把图片放到最上层并全屏显示，最好还是按照格子状页面上显示多个水印内容。
一、生成图片
因为不同页面大小不同，不同身份的人也应该设置不同的水印信息。这就需要我们动态生成图片，这里就需要使用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）