当我们的项目开发完成之后通常要做一个演示网站，那么如何防止我们辛苦开发的网站被别人滥用呢？我们可以通过在网页上添加水印来注明所有人的信息，像下面这个样子。

那么如何添加水印呢，今天就来介绍三种比较常用的添加水印的方法。下面所有的网页都以若依的后台管理系统为例。

利用CSS样式添加水印

添加的水印效果如图所示

具体做法是我们定义一个水印的样式——

floating-watermark，然后在需要被添加水印的标签中引用这个样式。样式案例如下：
.floating-watermark {
position: fixed;//这个属性使元素相对于浏览器窗口固定定位，这意味着即使页面滚动，元素也会保持在固定位置 top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
//这个属性设置了元素的背景图像。在这里，使用了一个数据URI来嵌入一个SVG图像。这个SVG图像包含了倾斜的“测试水印”文字
background-image: url('data:image/svg+xml;utf8,<svg xmlns="SVG namespace" width="400" height="400"><text x="50" y="200" font-size="30" fill="rgba(0, 0, 0, 0.1)" transform="rotate(-45, 50, 200)">测试水印</text></svg>');
background-repeat: repeat;
z-index: 1000;//这个属性设置了水印的图层，值越大则越靠上
}

Canvas元素添加水印

使用Canvas来创建满屏倾斜的水印文字涉及到在Vue组件中使用JavaScript来动态绘制水印。效果如下。

具体做法是在js中定义一个绘制水印的方法——drawWatermark，然后在组件的mounted生命周期钩子中调用drawWatermark方法，以确保在组件加载时绘制并显示水印。样例写法如下。

drawWatermark() {
let canvas = document.createElement('canvas');
const spacing = 300; // 水印间的间距
canvas.width = window.innerWidth * 2; // Canvas的宽度为视口宽度的两倍
canvas.height = window.innerHeight * 2; // Canvas的高度为视口高度的两倍

let ctx = canvas.getContext('2d');
ctx.font = '30px Arial'; // 字体大小
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 字体颜色和透明度
ctx.rotate(-Math.PI / 4); // 将文字旋转45度
?
// 在Canvas上重复绘制倾斜的文字
for (let x = -canvas.width; x < canvas.width; x += spacing) {
for (let y = -canvas.height; y < canvas.height; y += spacing) {
ctx.fillText('测试水印', x, y);
}
}
?
// 创建一个新的div元素用于显示水印
const watermarkDiv = document.createElement('div');
watermarkDiv.style.position = 'fixed';
style.top-正在西部数码(www.west.cn)进行交易 = '0';
watermarkDiv.style.left = '0';
watermarkDiv.style.width = '100%';
watermarkDiv.style.height = '100%';
watermarkDiv.style.backgroundImage = `url(${canvas.toDataURL()})`;
watermarkDiv.style.backgroundRepeat = 'repeat';
watermarkDiv.style.pointerEvents = 'none';
watermarkDiv.style.zIndex = '9999'; // 设置高z-index值
?
document.body.appendChild(watermarkDiv);
}

第三方工具库添加水印

最后一种方法是利用第三方工具库来实现添加水印的效果，这里我推荐

vue-watermark-directive组件。效果如图所示。

首先我们需要安装vue-watermark-directive组件。

npm install vue-watermark-directive --save

然后在项目中引用组件，修改main.js

import VueWatermark from 'vue-watermark-directive';

最后在标签中使用

<div class="app-container" v-watermark="'测试水印'">

总结

这三种方法中Canvas使用灵活，CSS方法和第三方组件简单易用，大家可以根据自己项目的情况选择一种使用。

更多文章推荐公众号【程序员老J】