封装自定义水印指令

在项目中创建一个watermark.js文件，封自定义自定的方法，这个文件不需要修改可以直接复制粘贴使用，当然可以根据自己的水印样式需求，去修改文件中的属性设置；

// 生成包含水印文本的图片方法
function generateWatermark(text, fontSize, color) {
    const canvas = document.createElement('canvas'); // 创建canvas元素
    canvas.width = 300; // 设置canvas宽度
    canvas.height = 160; // 设置canvas高度
    const ctx = canvas.getContext('2d'); // 获取2D绘图上下文
    ctx.font = `${fontSize}px Arial`; // 设置字体大小和字体样式
    ctx.fillStyle = color; // 设置字体颜色
    ctx.translate(20, canvas.height - 20); // 平移坐标原点
    ctx.rotate(-Math.PI / 6); // 旋转角度
    const watermarkText = text;
    ctx.fillText(watermarkText, 0, 0); // 绘制文本
    return canvas.toDataURL('image/png'); // 将canvas内容转换为base64格式的图片
}
//应用水印到指定元素
// el:要添加水印的元素、color:字体颜色、text:水印文本、fontSize:字体大小
function applyWatermark(el, text, fontSize, color) {
    const watermarkUrl = generateWatermark(text, fontSize, color);
    const watermarkLayer = document.createElement('div');
    watermarkLayer.style.cssText = `  
        position: absolute;  
        top: 0; 
        left: 0;
        z-index:100;
        width:100%;  
        height: 100%;  
        background-image: url(${watermarkUrl});  
        background-repeat: repeat;  
        pointer-events: none;  
    `;
    el.style.position = 'relative'; // 应用样式
    el.appendChild(watermarkLayer); // 将水印层添加到元素中
}

export default {
    bind(el, binding, vnode) {
        const defaultText = '默认水印'; // 默认水印文本
        const defaultFontSize = 16; // 默认字体大小
        const defaultColor = 'rgba(0, 0, 0, 0.2)'; // 默认字体颜色

        applyWatermark(el, defaultText, defaultFontSize, defaultColor);

    },
    unbind(el) {
        el.removeChild(el.lastChild);
    }
}

在main.js中全局注册指令

//引入封装的文件
import watermarkFile from './components/v1/watermark.js'
//全局注册指定
Vue.directive('watermark', watermarkFile)

项目中使用指令

可以在自己需要添加水印的html标签上直接添加v-watermark指令；

<div v-watermark>展示内容区域</div>

完成，这样你就可以里看到你想要的水印啦；