@watermark-design 技术文档

一、简介

@watermark-design 是一个功能强大的开源水印组件库，用于在浏览器中生成水印。它采用现代化的前端技术栈，提供了多种使用方式，包括 Vue 组件、React 组件以及纯 DOM 操作方式。

核心特点：

多框架同时支持 Vue 2 和 Vue 3
可定制支持自定义水印内容、大小、位置、透明度等属性
轻量代码轻量，不会对页面性能造成负担
TypeScript 完整的 TypeScript 类型定义
安全支持防止删除水印、防止修改样式隐藏水印等功能
MIT 可自由用于商业项目

适用场景： 版权保护、文档标识、品牌宣传、敏感数据防泄露等

二、安装

npmyarnpnpm

bash

# Vue 版本
npm install @watermark-design/vue

# DOM 版本
npm install @watermark-design/dom

bash

# Vue 版本
yarn add @watermark-design/vue

# DOM 版本
yarn add @watermark-design/dom

bash

# Vue 版本
pnpm add @watermark-design/vue

# DOM 版本
pnpm add @watermark-design/dom

三、Vue 使用指南

@watermark-design/vue 同时兼容 Vue 2 和 Vue 3。

1. 全局注册

在项目入口文件（main.js 或 main.ts）中全局注册：

Vue 3Vue 2

javascript

import { createApp } from "vue";
import App from "./App.vue";
import WatermarkDesign from "@watermark-design/vue";

const app = createApp(App);
app.use(WatermarkDesign);
app.mount("#app");

javascript

import Vue from "vue";
import WatermarkDesign from "@watermark-design/vue";

Vue.use(WatermarkDesign);

2. 在组件中使用

全局注册后，即可在任何组件中使用 <Watermark> 标签：

vue

<template>
  <Watermark content="内部文档，请勿外传" :width="200" :height="200">
    <div style="height: 400px; background: #f5f5f5;">
      <!-- 你的页面内容 -->
      <p>这是受水印保护的内容区域</p>
    </div>
  </Watermark>
</template>

3. 多行文字水印

通过数组形式配置多行水印内容：

vue

<template>
  <Watermark
    :content="['版权所有', '未经授权禁止转载']"
    :width="200"
    :height="100"
    :gap="20"
  >
    <div style="height: 400px;">
      <!-- 页面内容 -->
    </div>
  </Watermark>
</template>

4. 图片水印

使用图片作为水印（图片优先级高于文字水印）：

vue

<template>
  <Watermark image="/path/to/logo.png" :width="150" :height="150">
    <div style="height: 400px;">
      <!-- 页面内容 -->
    </div>
  </Watermark>
</template>

图片水印最佳实践

为保证图片高清且不被拉伸，建议上传至少两倍宽高的 logo 图片，并设置合适的 width 和 height。

5. 动态更新水印内容

vue

<template>
  <div>
    <input v-model="watermarkText" placeholder="输入水印文字" />
    <Watermark :content="watermarkText" :width="200" :height="200">
      <div style="height: 400px;">
        <!-- 页面内容 -->
      </div>
    </Watermark>
  </div>
</template>

<script setup>
import { ref } from "vue";

const watermarkText = ref("默认水印文字");
</script>

四、DOM 使用指南

@watermark-design/dom 提供了纯 JavaScript 的水印操作方式，适用于任何原生 HTML/JS 项目，不依赖任何框架。

1. 基本用法

javascript

import { Watermark } from "@watermark-design/dom";

const watermark = new Watermark({
  content: "hello my watermark",
  width: 200,
  height: 200,
});

watermark.create();

2. 指定容器

默认水印会添加到 document.body，你也可以指定自定义容器：

javascript

import { Watermark } from "@watermark-design/dom";

const watermark = new Watermark({
  container: document.getElementById("app"),
  content: "机密文件",
  width: 200,
  height: 200,
});

watermark.create();

3. 移除水印

javascript

// 移除已创建的水印
watermark.destroy();

4. 完整示例

html

<!DOCTYPE html>
<html>
  <head>
    <title>水印示例</title>
  </head>
  <body>
    <div id="app">
      <h1>受水印保护的页面</h1>
      <p>此页面所有内容均受水印保护</p>
    </div>

    <script type="module">
      import { Watermark } from "@watermark-design/dom";

      const watermark = new Watermark({
        container: document.getElementById("app"),
        content: "内部资料 请勿外传",
        width: 200,
        height: 100,
        rotate: -30,
        color: "rgba(0, 0, 0, 0.1)",
        fontSize: 16,
        gap: [100, 100],
      });

      watermark.create();
    </script>
  </body>
</html>

五、配置选项（API）

通用配置项

参数	说明	类型	默认值
`content`	水印文字内容，支持字符串或字符串数组（多行）	`string \| string[]`	`'内部文档，请勿外传'`
`image`	水印图片地址，优先级高于文字水印	`string`	`undefined`
`width`	水印宽度	`number`	`120`
`height`	水印高度	`number`	`64`
`rotate`	水印旋转角度（度）	`number`	`-30`
`color`	水印文字颜色	`string`	`rgba(0,0,0,0.1)`
`fontSize`	水印文字大小	`number`	`16`
`fontFamily`	水印字体	`string`	`'Arial'`
`gap`	水印之间的间距 `[水平, 垂直]`	`[number, number]`	`[100, 100]`
`offset`	水印偏移量 `[水平, 垂直]`	`[number, number]`	`[0, 0]`
`zIndex`	水印层级	`number`	`9999`
`globalAlpha`	水印整体透明度	`number`	`0.1`
`container`	水印挂载的容器元素（DOM 版）	`HTMLElement \| string`	`document.body`
`secure`	是否启用防篡改保护	`boolean`	`true`

六、高级功能

1. 防篡改保护

防篡改机制

@watermark-design 内置了防篡改机制，通过 MutationObserver 监听水印 DOM 节点的变化。当水印节点被删除或属性被修改时，系统会自动重新添加水印。

javascript

const watermark = new Watermark({
  content: "受保护的内容",
  secure: true, // 启用防篡改保护
  width: 200,
  height: 200,
});

watermark.create();

2. 图片水印异常降级

图片加载异常处理

当使用图片水印且图片加载异常时，可以同时配置 content 作为降级方案，防止水印失效。

vue

<template>
  <Watermark
    image="/path/to/logo.png"
    content="© 2026 Company Name"
    :width="200"
    :height="200"
  >
    <div style="height: 400px;">
      <!-- 页面内容 -->
    </div>
  </Watermark>
</template>

七、常见问题

Q：水印被开发者工具隐藏了怎么办？

@watermark-design 内置了防篡改机制（secure: true），当水印被删除或隐藏时会自动恢复。

Q：Vue 2 和 Vue 3 都能用吗？

可以。@watermark-design/vue 同时支持 Vue 2 和 Vue 3。

Q：如何实现全屏水印？

将 <Watermark> 组件包裹在页面根容器外层，或使用 DOM 版本时将 container 设为 document.body。

Q：水印会阻塞页面渲染吗？

不会。水印通过独立的 DOM 层或 Canvas 实现，采用绝对定位或固定定位，不会影响页面正常内容的渲染和交互。

八、相关链接

官方文档：https://watermark-design.github.io/watermark/
GitHub 仓库：https://github.com/watermark-design/watermark
问题反馈：提交 Issue

@watermark-design 技术文档 ​

一、简介 ​

二、安装 ​

三、Vue 使用指南 ​

1. 全局注册 ​

2. 在组件中使用 ​

3. 多行文字水印 ​

4. 图片水印 ​

5. 动态更新水印内容 ​

四、DOM 使用指南 ​

1. 基本用法 ​

2. 指定容器 ​

3. 移除水印 ​

4. 完整示例 ​

五、配置选项（API） ​

通用配置项 ​

六、高级功能 ​

1. 防篡改保护 ​

2. 图片水印异常降级 ​

七、常见问题 ​

Q：水印被开发者工具隐藏了怎么办？ ​

Q：Vue 2 和 Vue 3 都能用吗？ ​

Q：如何实现全屏水印？ ​

Q：水印会阻塞页面渲染吗？ ​

八、相关链接 ​

@watermark-design 技术文档

一、简介

二、安装

三、Vue 使用指南

1. 全局注册

2. 在组件中使用

3. 多行文字水印

4. 图片水印

5. 动态更新水印内容

四、DOM 使用指南

1. 基本用法

2. 指定容器

3. 移除水印

4. 完整示例

五、配置选项（API）

通用配置项

六、高级功能

1. 防篡改保护

2. 图片水印异常降级

七、常见问题

Q：水印被开发者工具隐藏了怎么办？

Q：Vue 2 和 Vue 3 都能用吗？

Q：如何实现全屏水印？

Q：水印会阻塞页面渲染吗？

八、相关链接