vue 水印 实现
Vue 水印实现方法
使用 canvas 动态生成水印
在 Vue 组件中通过 canvas 绘制水印，并将其作为背景图片插入到目标元素中。这种方法灵活性高，支持动态调整水印内容、角度和透明度。
<template>
<div class="watermark-container" ref="watermark"></div>
</template>
<script>
export default {
mounted() {
this.generateWatermark();
},
methods: {
generateWatermark() {
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext('2d');
ctx.font = '16px Arial';
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.rotate(-20 * Math.PI / 180);
ctx.fillText('Confidential', 50, 80);
const watermarkUrl = canvas.toDataURL();
this.$refs.watermark.style.backgroundImage = `url(${watermarkUrl})`;
this.$refs.watermark.style.backgroundRepeat = 'repeat';
}
}
}
</script>
<style>
.watermark-container {
width: 100%;
height: 100%;
position: relative;
}
</style>使用 CSS 伪元素实现静态水印
对于简单的水印需求，可以直接通过 CSS 伪元素实现。这种方法性能更好，但灵活性较低。
<template>
<div class="watermark-wrapper">
<!-- 页面内容 -->
</div>
</template>
<style>
.watermark-wrapper {
position: relative;
}
.watermark-wrapper::after {
content: "Watermark Text";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
opacity: 0.1;
font-size: 24px;
color: #000;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-30deg);
}
</style>使用第三方库 vue-watermark
对于需要快速集成的情况，可以使用专门的水印库如 vue-watermark。
安装依赖：
npm install vue-watermark --save使用示例：
<template>
<vue-watermark
:text="watermarkText"
:font="watermarkFont"
:opacity="0.2"
:width="200"
:height="150"
>
<!-- 需要加水印的内容 -->
</vue-watermark>
</template>
<script>
import VueWatermark from 'vue-watermark';
export default {
components: { VueWatermark },
data() {
return {
watermarkText: 'Secret',
watermarkFont: '16px Arial'
}
}
}
</script>防止水印被删除的安全方案
为防止用户通过开发者工具删除水印，可以采用以下防护措施：
mounted() {
this.generateWatermark();
setInterval(() => {
if (!document.querySelector('.watermark')) {
this.generateWatermark();
}
}, 1000);
}同时配合 MutationObserver 监听 DOM 变化：
const observer = new MutationObserver((mutations) => {
mutations.forEach(() => {
this.checkWatermark();
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});响应式水印调整
在窗口大小变化时重新计算水印位置和大小：
window.addEventListener('resize', this.handleResize);
handleResize() {
this.generateWatermark();
}注意在组件销毁时移除事件监听：
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
}
