当前位置：首页 > news >正文

Vue 自定义水印指令实现方案解析

news 2025/8/9 14:28:24

一、功能概述

这个 Vue 自定义指令实现了在任意元素上添加防篡改水印的功能，主要特点包括：

可自定义文本内容、样式和布局
自动生成重复平铺的水印背景
提供防篡改保护机制
支持响应式更新

二、核心实现解析

1. 水印画布生成

function generateWatermark(config) {const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')// 计算文本尺寸并确定画布大小ctx.font = config.fontconst textWidth = ctx.measureText(config.text).widthconst size = Math.max(textWidth, config.rowSpacing, config.colSpacing) * 1.5canvas.width = canvas.height = size// 绘制旋转文本ctx.save()ctx.font = config.fontctx.fillStyle = config.colorctx.textAlign = 'center'ctx.textBaseline = 'middle'ctx.translate(size / 2, size / 2)ctx.rotate((Math.PI / 180) * config.angle)ctx.fillText(config.text, 0, 0)ctx.restore()return canvas.toDataURL('image/png')
}

技术要点：

动态计算画布尺寸确保水印间距
使用 Canvas 2D API 绘制旋转文本
输出 base64 格式的 PNG 图片数据

2. 水印元素创建

function createWatermarkElement(url, config) {const watermark = document.createElement('div')Object.assign(watermark.style, {position: 'absolute',top: '0',left: '0',width: '100%',height: '100%',pointerEvents: 'none',backgroundImage: `url(${url})`,backgroundRepeat: 'repeat',zIndex: '9999',opacity: config.opacity || '1'})return watermark
}

设计考虑：

使用绝对定位覆盖目标元素
pointer-events: none 确保不影响交互
平铺背景实现全屏水印效果

3. 防篡改保护机制

function observeWatermark(watermark, target) {const observer = new MutationObserver((mutations) => {for (const mutation of mutations) {// 检测水印元素被移除if (mutation.removedNodes.length) {[...mutation.removedNodes].some(node => node === watermark && target.appendChild(watermark))}// 检测样式修改if (mutation.attributeName === 'style') {watermark.setAttribute('style', watermark.style.cssText)}}})observer.observe(target, {attributes: true,subtree: true,childList: true,attributeFilter: ['style']})return observer
}

安全策略：

使用 MutationObserver 监控 DOM 变化
自动恢复被删除的水印元素
锁定水印元素样式防止修改

三、Vue 指令集成

export default {mounted(el, binding) {nextTick(() => {const config = { ...defaultConfig, ...binding.value }const url = generateWatermark(config)const watermark = createWatermarkElement(url, config)el.style.position = 'relative'el.appendChild(watermark)if (config.observe) {el._watermarkObserver = observeWatermark(watermark, el)}el._watermarkElement = watermark})},unmounted(el) {el._watermarkObserver?.disconnect()el._watermarkElement?.remove()}
}

最佳实践：

使用 nextTick 确保 DOM 就绪
合并默认配置和用户配置
妥善清理资源防止内存泄漏

四、使用示例

<template><div v-watermark="watermarkConfig" class="content-box"><!-- 页面内容 --></div>
</template><script>
export default {data() {return {watermarkConfig: {text: '机密文档',color: 'rgba(100, 130, 200, 0.1)',angle: -15}}}
}
</script>

完整代码

import { nextTick } from 'vue'// 默认配置
const defaultConfig = {text: '机密文件',          // 水印文本font: '16px Microsoft YaHei', // 字体color: 'rgba(128, 128, 128, 0.2)', // 文字颜色angle: -20,               // 旋转角度rowSpacing: 100,          // 行间距colSpacing: 100,          // 列间距observe: true             // 是否开启防篡改保护
}// 生成水印画布
function generateWatermark(config) {const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')// 计算文本宽度ctx.font = config.fontconst textWidth = ctx.measureText(config.text).width// 设置画布大小const size = Math.max(textWidth, config.rowSpacing, config.colSpacing) * 1.5canvas.width = sizecanvas.height = size// 绘制水印ctx.font = config.fontctx.fillStyle = config.colorctx.textAlign = 'center'ctx.textBaseline = 'middle'ctx.translate(size / 2, size / 2)ctx.rotate((Math.PI / 180) * config.angle)ctx.fillText(config.text, 0, 0)return canvas.toDataURL('image/png')
}// 创建水印元素
function createWatermarkElement(url, config) {const watermark = document.createElement('div')watermark.style.position = 'absolute'watermark.style.top = '0'watermark.style.left = '0'watermark.style.width = '100%'watermark.style.height = '100%'watermark.style.pointerEvents = 'none'watermark.style.backgroundImage = `url(${url})`watermark.style.backgroundRepeat = 'repeat'watermark.style.zIndex = '9999'watermark.style.opacity = config.opacity || '1'return watermark
}// 防篡改保护
function observeWatermark(watermark, target) {const observer = new MutationObserver((mutations) => {mutations.forEach((mutation) => {if (mutation.removedNodes.length) {mutation.removedNodes.forEach((node) => {if (node === watermark) {target.appendChild(watermark)}})}if (mutation.attributeName === 'style') {watermark.setAttribute('style', watermark.style.cssText)}})})observer.observe(target, {attributes: true,subtree: true,childList: true,attributeFilter: ['style']})return observer
}export default {mounted(el, binding) {nextTick(() => {const config = { ...defaultConfig, ...binding.value }const url = generateWatermark(config)const watermark = createWatermarkElement(url, config)el.style.position = 'relative'el.appendChild(watermark)if (config.observe) {const observer = observeWatermark(watermark, el)el._watermarkObserver = observer}el._watermarkElement = watermark})},unmounted(el) {if (el._watermarkObserver) {el._watermarkObserver.disconnect()}if (el._watermarkElement) {el.removeChild(el._watermarkElement)}}
}

全局注册

import { createApp } from 'vue'
import App from './App.vue'import watermark from './directives/watermark'
const app = createApp(App)
app.directive('watermark', watermark)
app.mount('#app')