水印通常用于保护版权、增强品牌识别度或提供额外的信息。 通过在前端实现水印，可以有效地保护内容的版权，增强品牌识别度，提供额外的信息，同时满足法律合规和安全防护的需求。
1.通过css背景图
可以通过CSS的background-image属性，将水印图片设置为页面的背景图。这种方式简单易用，适用于不需要动态生成水印的静态页面。
优点：
-
通过 CSS 的
background-image属性即可实现，代码简洁，易于理解和维护。 -
几乎所有现代浏览器都支持 CSS 背景图，无需额外的 JavaScript 支持。
-
背景图的加载和渲染性能较好，不会对页面性能造成显著影响。
缺点： 对于复杂布局或动态内容，CSS 背景图的控制力较弱。 水印容易被移除,用户可以通过修改 CSS 或者使用开发者工具轻松移除背景图水印。
.watermark { background-image: url('watermark.png'); background-repeat: repeat; background-position: center; }
2.通过canvas
利用HTML5的Canvas API，可以在页面上动态绘制水印。这种方式灵活性高，可以自定义水印的内容、样式和位置,适用于需要绘制复杂图形或文字的水印以及一些对水印安全性要求较高的场景。
优点：
-
动态生成水印：可以使用 JavaScript 动态生成水印，支持自定义水印内容、位置、样式等。
-
水印嵌入图像：水印可以嵌入到图像中，不易被移除，安全性较高。
-
灵活性高：可以绘制复杂的图形和文字，适合各种复杂的水印需求。
缺点：
-
-
在性能较差的设备上，绘制复杂水印可能会有一定的性能开销。
-
虽然大多数现代浏览器支持 Canvas，但一些旧版本浏览器可能不支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现水印的几种常用方式</title>
<style>
*{
padding: 0;
margin: 0;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
<h1>Hello, World!</h1>
<p>This is some content overlayed on top of the canvas.</p>
</div>
<script>
// 创建canvas画布
const canvas = document.createElement('canvas');
// 获取画布上下文
const ctx = canvas.getContext('2d');
// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 设置文本字体大小
ctx.font = '48px Arial';
// 设置画笔颜色及透明度
ctx.fillStyle = 'rgba(200, 200, 200, 0.5)';
// 旋转画布
ctx.rotate(-Math.PI / 4);
// 绘制文本，且设置文本x,y坐标
ctx.fillText('Watermark Text', 50, 500);
// 将canvas添加到body中
document.body.appendChild(canvas);
</script>
</body>
</html>
SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言，它使用矢量图形而不是位图来表示图像。SVG可以提供比Canvas更好的兼容性，并且支持更多的图形元素，如文本、路径、图像等。通过在页面上插入SVG元素，可以实现水印效果。
优点：
-
SVG 是矢量图形格式，水印可以缩放而不会失真，适合响应式布局。
-
灵活性高,可以使用 SVG 的各种元素和属性，绘制复杂的图形和文字。
-
兼容性较好,大多数现代浏览器都支持 SVG，但需要注意一些旧版本浏览器的兼容性问题。
缺点：
-
水印容易被移除,用户可以通过 DOM 操作移除 SVG 水印。
<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" style="position: absolute;top: 0;left: 0;right:0;bottom:0;margin:auto;"> <text x="10px" y="100px" font-size="18px" fill="rgba(18, 18, 18, 0.2)" transform="rotate(-20 10,20)"> Watermark Text </text> </svg>
可以使用一些第三方库，如watermark-js-plus，基于 canvas 画布的水印库，支持文本、多行文本、图片、富文本和暗水印;支持监听 DOM 改动行为，可防止水印被手动删除;提供丰富的配置项和完全类型化的 API。
可以通过 npm 安装的方式或者以 cdn 的方式引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现水印的几种常用方式</title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/watermark-js-plus/dist/index.iife.min.js"></script>
<script>
const watermark = new WatermarkPlus.Watermark({
content: 'hello my watermark',
width: 200,
height: 200 ,
rotate:45, // 水印旋转角度
})
watermark.create();
</script>
</body>
</html>
