实现添加水印功能常见的方法包括使用 CSS、Canvas 和 SVG 等。
方法 1: 使用 CSS 实现水印
通过 CSS 可以简单地实现全局水印，即给需要添加水印的元素添加背景图。这种方式比较简单方便，适合静态页面，但灵活性和防篡改能力较差。
具体的实现示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS水印示例</title>
<style>
.watermark {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
pointer-events: none;
opacity: 0.2;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="30" fill="rgba(0,0,0,0.1)">水印文本</text></svg>') repeat;
}
</style>
</head>
<body>
<div class="watermark"></div>
<div>
<h1>内容区域</h1>
<p>这是需要加水印的内容</p>
</div>
</body>
</html>
方法 2: 使用 Canvas 实现水印
使用 Canvas 可以生成更复杂的水印图案，适合动态内容，并且相对难以篡改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas水印示例</title>
<style>
.watermark {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
pointer-events: none;
opacity: 0.2;
}
</style>
</head>
<body>
<canvas id="watermarkCanvas" class="watermark"></canvas>
<div>
<h1>内容区域</h1>
<p>这是需要加水印的内容</p>
</div>
<script>
window.onload = function() {
var canvas = document.getElementById('watermarkCanvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var text = '水印文本';
var width = canvas.width;
var height = canvas.height;
ctx.font = '30px Arial';
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// 旋转并重复绘制水印文本
for (var x = 0; x < width; x += 200) {
for (var y = 0; y < height; y += 200) {
ctx.save();
ctx.translate(x, y);
ctx.rotate(- Math.PI / 4);
ctx.fillText(text, 0, 0);
ctx.restore();
}
}
};
</script>
</body>
</html>
方法 3: 使用 SVG 实现水印
SVG 也是一种实现水印的有效方式，容易实现和修改，具备良好的图形渲染能力。性能不如 canvas 好，但是dom更友好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG水印示例</title>
<style>
.watermark {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
pointer-events: none;
opacity: 0.2;
}
</style>
</head>
<body>
<div class="watermark">
<svg width="100%" height="100%">
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="30" fill="rgba(0,0,0,0.1)" transform="rotate(-45, 50, 50)">水印文本</text>
</svg>
</div>
<div>
<h1>内容区域</h1>
<p>这是需要加水印的内容</p>
</div>
</body>
</html>
方法 4: 动态生成水印图像
更灵活的方式是通过 JavaScript 动态生成水印图像。相对其他方式，最高的灵活性，可以在运行时生成任意图案的水印。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态水印示例</title>
<style>
.watermark {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
pointer-events: none;
background-repeat: repeat;
opacity: 0.2;
}
</style>
</head>
<body>
<div id="watermarkContainer"></div>
<div>
<h1>内容区域</h1>
<p>这是需要加水印的内容...</p>
</div>
<script>
function createWatermark(text) {
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.translate(100, 100);
ctx.rotate(- Math.PI / 4);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, 0, 0);
return canvas.toDataURL('image/png');
}
window.onload = function() {
var watermarkContainer = document.getElementById('watermarkContainer');
watermarkContainer.classList.add('watermark');
watermarkContainer.style.backgroundImage = 'url(' + createWatermark('水印文本') + ')';
};
</script>
</body>
</html>