@winner-fed/plugin-watermark

🚀 强大的水印插件 - 为 WinJS 应用提供全面的水印防护解决方案

✨ 特性

• 🛡️ 多重防护 - 支持文本水印、图片水印、盲水印等多种防护方式
• 🎨 高度定制 - 支持透明度、旋转角度、字体、颜色等全方位自定义
• 🔒 防篡改 - 内置 MutationObserver 监控，实时检测并修复水印破坏
• 🎯 精准控制 - 支持指定容器、层级、展示模式等精确控制
• 🖼️ 多种格式 - 支持文本、图片、多行文本等多种水印格式
• 👻 盲水印 - 支持隐形水印技术，兼顾美观与安全
• 📱 兼容性强 - 兼容现代浏览器，支持 Shadow DOM
• ⚡ 性能优化 - 基于 Canvas 渲染，高效流畅

🎯 应用场景

• 企业内部系统 - 保护敏感信息不被截图泄露
• 电商平台 - 防止商品图片被盗用
• 文档系统 - 标记文档归属和版权信息
• 在线教育 - 保护课程内容版权
• 金融系统 - 增强数据安全防护

📦 安装

# npm
npm install @winner-fed/plugin-watermark -D

# yarn
yarn add @winner-fed/plugin-watermark -D

# pnpm
pnpm add @winner-fed/plugin-watermark -D

🚀 快速开始

1. 配置插件

在 .winrc.ts 中启用插件：

// .winrc.ts
import { defineConfig } from '@winner-fed/winjs';

export default defineConfig({
  plugins: ['@winner-fed/plugin-watermark'],
  watermark: {
    // 插件配置（可选）
  },
});

2. 在应用中使用

// src/pages/index.vue
<template>
  <div>
    <!-- 你的内容 -->
    <h1>受保护的内容</h1>
    <p>这个页面已经被水印保护</p>
  </div>
</template>

<script setup lang="ts">
import { Watermark } from '@@/plugin-watermark';

// 创建水印实例
const watermark = new Watermark({
  text: '机密文档',
  opacity: 0.15,
  fontSize: 16,
  rotate: -22,
  fontColor: '#000000'
});
</script>

💡 使用方式

基础文本水印

import { Watermark } from '@@/plugin-watermark';

// 简单文本水印
const watermark = new Watermark({
  text: '版权保护',
  opacity: 0.1,
  fontSize: 16,
  fontColor: '#666666'
});

多行文本水印

// 多行文本水印
const watermark = new Watermark({
  text: ['公司机密', '禁止外传', '2024-01-01'],
  gapX: 150,
  gapY: 100,
  opacity: 0.15,
  fontSize: 14,
  fontColor: '#999999'
});

图片水印

// 图片水印
const watermark = new Watermark({
  image: 'https://example.com/logo.png',
  width: 100,
  height: 50,
  opacity: 0.2,
  gapX: 200,
  gapY: 150
});

盲水印（隐形水印）

// 盲水印 - 肉眼不可见，但可以通过技术手段检测
const watermark = new Watermark({
  text: '正常显示的内容',
  blindText: '隐藏的版权信息',
  blindOpacity: 0.005,
  blindFontSize: 12,
  opacity: 0.1
});

⚙️ 配置选项

基础配置

| 参数 | 类型 | 默认值 | 描述 | | ----------- | --------------------- | -------- | -------------------------- | | text | string \| string[] | - | 水印文本，数组表示多行 | | image | string | - | 图片水印源，优先级高于文本 | | width | number | 120 | 单个水印宽度 | | height | number | 64 | 单个水印高度 | | opacity | number | 0.15 | 水印透明度 (0-1) | | rotate | number | -22 | 旋转角度 | | zIndex | number | 9999 | 样式层级 |

布局配置

| 参数 | 类型 | 默认值 | 描述 | | -------------- | ------------------------- | -------------- | ---------------------------- | | gapX | number | 100 | 水印水平间距 | | gapY | number | 100 | 水印垂直间距 | | offsetLeft | number | 0 | 水平偏移量 | | offsetTop | number | 0 | 垂直偏移量 | | mode | 'repeat' \| 'interval' | 'interval' | 展示模式，interval为错行展示 |

字体配置

| 参数 | 类型 | 默认值 | 描述 | | -------------- | ----------------------- | ---------------- | ------------ | | fontSize | number | 16 | 字体大小 | | fontWeight | string \| number | '300' | 字体粗细 | | fontStyle | 'normal' \| 'italic' | 'normal' | 字体样式 | | fontFamily | string | 'sans-serif' | 字体族 | | fontColor | string | '#000' | 字体颜色 | | textAlign | CanvasTextAlign | 'center' | 文本对齐方式 |

容器配置

| 参数 | 类型 | 默认值 | 描述 | | ------------------ | ------------------------ | ----------------- | ------------ | | container | HTMLElement \| string | document.body | 水印挂载容器 | | containerStyle | Record<string, any> | {} | 容器样式 | | pack | boolean | true | 是否包裹内容 |

高级配置

| 参数 | 类型 | 默认值 | 描述 | | ----------------- | ----------- | --------- | ------------------ | | monitor | boolean | true | 是否开启防删除监控 | | blindText | string | - | 盲水印文本 | | blindFontSize | number | 16 | 盲水印字体大小 | | blindOpacity | number | 0.005 | 盲水印透明度 |

🎨 实战示例

1. 企业内部系统

// 适用于企业内部系统的水印配置
const watermark = new Watermark({
  text: ['机密文档', '张三', '2024-01-01 10:30'],
  gapX: 200,
  gapY: 150,
  opacity: 0.08,
  fontSize: 14,
  fontColor: '#ff0000',
  rotate: -30,
  monitor: true, // 开启防删除监控
  zIndex: 99999
});

2. 电商商品保护

// 电商平台商品图片保护
const watermark = new Watermark({
  image: '/logo.png',
  width: 80,
  height: 30,
  opacity: 0.3,
  gapX: 300,
  gapY: 200,
  container: '.product-gallery',
  mode: 'repeat'
});

3. 在线文档系统

// 在线文档版权保护
const watermark = new Watermark({
  text: '©️ 2024 公司名称 版权所有',
  opacity: 0.05,
  fontSize: 12,
  fontColor: '#666',
  gapX: 250,
  gapY: 180,
  rotate: -15,
  monitor: true
});

4. 金融系统盲水印

// 金融系统的隐形水印
const watermark = new Watermark({
  text: '客户报表',
  opacity: 0.1,
  // 添加隐形水印
  blindText: `用户ID:${userId}-${timestamp}`,
  blindOpacity: 0.003,
  blindFontSize: 10,
  monitor: true
});

5. 指定容器水印

// 为特定容器添加水印
const watermark = new Watermark({
  text: '内部资料',
  container: '#sensitive-content',
  containerStyle: {
    position: 'relative',
    overflow: 'hidden'
  },
  opacity: 0.12,
  fontSize: 14
});

🔧 API 方法

更新水印

// 动态更新水印配置
watermark.update({
  text: '新的水印文本',
  opacity: 0.2,
  fontColor: '#ff0000'
});

显示/隐藏水印

// 显示水印
watermark.show();

// 隐藏水印
watermark.hide();

销毁水印

// 销毁水印实例
watermark.destroy();

🛡️ 安全特性

防篡改监控

插件内置 MutationObserver 监控，实时检测以下破坏行为：

• 删除水印节点
• 修改水印样式
• 篡改水印属性
• 其他恶意操作

// 启用防篡改监控
const watermark = new Watermark({
  text: '受保护内容',
  monitor: true, // 开启监控
  opacity: 0.1
});

盲水印技术

支持隐形水印技术，在不影响视觉效果的前提下嵌入版权信息：

// 盲水印解密
import { blindDecryption } from '@@/plugin-watermark';

// 在 Canvas 上解密盲水印
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
blindDecryption(ctx); // 显示隐藏的水印信息

🎯 高级用法

动态水印

// 根据用户信息动态生成水印
const createUserWatermark = (user: any) => {
  return new Watermark({
    text: [
      `用户：${user.name}`,
      `部门：${user.department}`,
      `时间：${new Date().toLocaleString()}`
    ],
    opacity: 0.08,
    fontSize: 12,
    fontColor: '#666',
    monitor: true
  });
};

// 使用
const watermark = createUserWatermark(currentUser);

多容器水印

// 为多个容器分别添加水印
const containers = ['.content-1', '.content-2', '.content-3'];

containers.forEach(container => {
  new Watermark({
    text: '版权保护',
    container,
    opacity: 0.1,
    fontSize: 14
  });
});

响应式水印

// 根据屏幕尺寸调整水印
const getResponsiveConfig = () => {
  const width = window.innerWidth;
  
  if (width < 768) {
    return {
      fontSize: 12,
      gapX: 80,
      gapY: 60,
      opacity: 0.08
    };
  } else if (width < 1024) {
    return {
      fontSize: 14,
      gapX: 120,
      gapY: 80,
      opacity: 0.1
    };
  } else {
    return {
      fontSize: 16,
      gapX: 150,
      gapY: 100,
      opacity: 0.12
    };
  }
};

const watermark = new Watermark({
  text: '版权保护',
  ...getResponsiveConfig()
});

// 监听窗口变化
window.addEventListener('resize', () => {
  watermark.update(getResponsiveConfig());
});

🔍 常见问题

Q: 水印被删除了怎么办？

A: 插件内置防删除监控，会自动重新生成水印：

const watermark = new Watermark({
  text: '受保护内容',
  monitor: true, // 确保开启监控
  opacity: 0.1
});

Q: 如何调整水印密度？

A: 通过 gapX 和 gapY 参数调整：

const watermark = new Watermark({
  text: '版权保护',
  gapX: 50,  // 减小间距增加密度
  gapY: 50,
  opacity: 0.08
});

Q: 如何让水印更不明显？

A: 降低透明度或使用盲水印：

const watermark = new Watermark({
  text: '版权保护',
  opacity: 0.03,      // 降低透明度
  blindText: '隐藏信息', // 添加盲水印
  blindOpacity: 0.001
});

Q: 如何防止水印影响用户操作？

A: 水印默认设置了 pointer-events: none，不会影响用户操作。

Q: 如何在特定页面禁用水印？

A: 使用条件判断：

if (shouldShowWatermark) {
  const watermark = new Watermark({
    text: '版权保护',
    opacity: 0.1
  });
}

📋 最佳实践

1. 透明度设置

• 企业内部系统：0.08-0.15（较明显）
• 用户界面：0.03-0.08（较隐蔽）
• 盲水印：0.001-0.005（不可见）

2. 文本内容建议

• 包含版权信息
• 包含用户标识
• 包含时间戳
• 简短明了

3. 性能优化

// 避免频繁更新水印
const watermark = new Watermark({
  text: '版权保护',
  monitor: true // 只在需要时开启监控
});

// 页面卸载时销毁水印
onUnmounted(() => {
  watermark.destroy();
});

4. 安全建议

• 始终开启监控模式
• 使用盲水印作为备用方案
• 定期检查水印完整性
• 结合后端日志记录

🔒 安全等级说明

基础防护

• 透明度：0.08-0.15
• 监控：开启
• 适用：一般内容保护

中等防护

• 透明度：0.05-0.1
• 监控：开启
• 盲水印：开启
• 适用：重要内容保护

高级防护

• 透明度：0.03-0.08
• 监控：开启
• 盲水印：开启
• 多层水印：开启
• 适用：机密内容保护

📄 许可证

MIT

🔗 相关链接

• Canvas API 文档
• MutationObserver 文档