> 面向小白的手把手教程。读完你会发现，给网页加盲水印只需要 3 行核心代码。

---

## 一、什么是盲水印？

**盲水印（Invisible Watermark）** 是一种肉眼几乎看不见、但技术上可以追溯的水印。

想象一下：你公司内部系统、付费课程、或者设计稿，最怕的就是有人**截图转发**。传统水印虽然防，但很丑、影响阅读体验，而且容易被裁掉。

盲水印的思路是——把「版权信息」以**极低的透明度**铺满整个页面：

- 平时：透明度低到肉眼完全察觉不到，页面干净漂亮；
- 追责时：把截图放大、调对比度，就能把文字「揪」出来，查到是谁泄露的。

> 本教程使用的是开源插件 [`vue3-blind-watermark`](https://github.com/Huo-zai-feng-lang-li/vue3-blind-watermark)，它号称「迄今为止最易用的盲水印」。

---

## 二、最终效果

先看看我们要做出什么样子。
![image.png](https://developer.qcloudimg.com/http-save/yehe-4557087/ad245392cf4baeb70ee084b02223f15b.png)

页面看起来和普通网页**一模一样**，但其实已经铺满了看不见的水印。点一下按钮，就能「显形」：
![image.png](https://developer.qcloudimg.com/http-save/yehe-4557087/c29b8fa2de8a91c66e21ea25547a8ad0.png)

---

## 三、准备工作![image.png](https://developer.qcloudimg.com/http-save/yehe-4557087/643b78be488193048c1498705f95cd9a.png)

你需要电脑上装了 [Node.js](https://nodejs.org/)（版本 16 以上即可）。

验证是否装好：打开终端（Windows 用 `cmd` 或 PowerShell），输入：

```bash
node -v
npm -v
```

能看到版本号就说明 OK 了。

![image.png](https://developer.qcloudimg.com/http-save/yehe-4557087/ea56dd89bfebcc5deb22b1b87b4ec98b.png)

---

## 四、动手做（5 个步骤）

### 第 1 步：初始化项目

新建一个文件夹作为项目目录，然后进入它，用 npm 初始化：

```bash
mkdir blind-watermark-demo
cd blind-watermark-demo
npm init -y
```

> 本文的项目目录叫 `盲水印`，你叫什么都可以。

### 第 2 步：安装依赖

我们需要 3 样东西：

- `vue` — Vue 3 框架
- `vite` + `@vitejs/plugin-vue` — 本地开发服务器（让你 `npm run dev` 就能跑）
- `vue3-blind-watermark` — 今天的主角，盲水印插件

```bash
npm install vue vue3-blind-watermark
npm install -D vite @vitejs/plugin-vue
```

装完后，你的 `package.json` 里应该长这样（关键是 `scripts` 和 `dependencies`）：

```json
{
  "name": "blind-watermark-demo",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.0",
    "vue3-blind-watermark": "^1.1.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "vite": "^5.0.0"
  }
}
```

### 第 3 步：创建配置和入口文件

整个项目只需要几个文件。结构如下：

```
你的项目目录/
├── index.html          # 页面入口
├── vite.config.js      # Vite 配置
└── src/
    ├── main.js         # 应用入口（盲水印在这里启用）
    ├── App.vue         # 页面组件
    └── watermark.config.js  # 水印文字配置（可选，方便统一管理）
```

**① 新建 `vite.config.js`**（告诉 Vite 我们要用 Vue）：

```js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});
```

**② 新建 `index.html`**（普通网页入口）：

```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盲水印 Demo</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
```

**③ 新建 `src/watermark.config.js`**（把水印文字单独放一个文件，方便以后改）：

```js
export const watermarkText = "版权归 XXX 公司所有 | 内部资料 禁止外传";
```

### 第 4 步：启用盲水印（核心！）

新建 `src/main.js`，**这才是重头戏**：

```js
import { createApp } from "vue";
import App from "./App.vue";

// ① 引入盲水印插件
import watermark from "vue3-blind-watermark";
import { watermarkText } from "./watermark.config.js";

const app = createApp(App);

// ② 使用插件，传入水印文字
app
  .use(watermark, {
    text: watermarkText,
  })
  .mount("#app");
```

看到了吗？**核心代码就这两行**——`import` 引入，然后 `app.use()` 传个文字。就这么简单。

### 第 5 步：写页面内容

新建 `src/App.vue`，随便写点业务内容（这里加一个按钮，用来查看盲水印）：

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

const count = ref(0);
</script>

<template>
  <main class="page">
    <h1>vue3-blind-watermark 盲水印 Demo</h1>
    <p>页面上已经铺了一层「盲水印」，肉眼几乎看不见。</p>

    <section class="card">
      <h2>业务内容区域</h2>
      <p>当前点击次数：{{ count }}</p>
      <button @click="count++">点我 +1</button>
    </section>
  </main>
</template>

<style>
body {
  margin: 0;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background: #f5f6f8;
}
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px;
}
.card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
</style>
```

### 跑起来！

在终端执行：

```bash
npm run dev
```

然后浏览器打开终端提示的地址（默认 `http://localhost:5173`）。

![image.png](https://developer.qcloudimg.com/http-save/yehe-4557087/1ace55b1bb5b1afa680e493491ebe0dd.png)

![image.png](https://developer.qcloudimg.com/http-save/yehe-4557087/6a7df3ac36c7debcab672e16527639fc.png)

---

## 五、验证：水印真的在吗？

页面看着没水印，怎么证明它真的加了？两种方法：

### 方法 1：查看 DOM

按 **F12** 打开开发者工具 → 切到 `Elements`（元素）标签 → 在页面结构里找到：

```html
<div class="waterMask">...</div>
```

它的 `background-image` 就是那张铺满全屏的水印图。

### 方法 2：用按钮「显形」

我们在页面上加一个按钮，点击后把水印以**可见方式**临时叠加显示，一眼看清水印内容和位置。这是下一节的重点。

---

## 六、进阶：加一个「查看盲水印」按钮

盲水印太隐蔽，日常调试、或者给领导演示时，最好能一键「显形」。

**思路**：不要直接去改插件生成的 `.waterMask` 元素——因为插件内部有 `MutationObserver` 监听，你一改它，它就会自动「复原」。正确做法是**另外叠一个可见的预览层**。

改造 `src/App.vue`：

```vue
<script setup>
import { computed, ref } from "vue";
import { watermarkText } from "./watermark.config.js";

const count = ref(0);
const showWatermark = ref(false); // 是否显示可见水印

// 画一张可见的水印图（文字、字号、间距和插件一致，只是透明度更高）
function createVisibleWatermark(text) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  if (!ctx) return "";

  const fontSize = 16;   // 和插件一致
  const padding = 50;    // 和插件一致
  ctx.font = `${fontSize}px Arial`;
  const textWidth = ctx.measureText(text).width;

  canvas.width = textWidth + padding;
  canvas.height = fontSize * 2;

  ctx.font = `${fontSize}px Arial`;
  ctx.fillStyle = "rgba(0, 0, 0, 0.25)"; // 透明度 0.25，肉眼可见
  ctx.textAlign = "center";
  ctx.fillText(text, canvas.width / 2, canvas.height / 2);

  return canvas.toDataURL("image/png");
}

const previewStyle = computed(() => {
  if (!showWatermark.value) return {};
  const url = createVisibleWatermark(watermarkText);
  // 平铺尺寸要和图片尺寸一致
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const fontSize = 16;
  const padding = 50;
  ctx.font = `${fontSize}px Arial`;
  const w = ctx.measureText(watermarkText).width + padding;
  const h = fontSize * 2;
  return {
    backgroundImage: `url(${url})`,
    backgroundSize: `${w}px ${h}px`,
    backgroundRepeat: "repeat",
  };
});
</script>

<template>
  <main class="page">
    <h1>vue3-blind-watermark 盲水印 Demo</h1>

    
    <button class="toggle" @click="showWatermark = !showWatermark">
      {{ showWatermark ? "隐藏盲水印" : "查看盲水印" }}
    </button>

    <section class="card">
      <p>当前点击次数：{{ count }}</p>
      <button @click="count++">点我 +1</button>
    </section>

    
    <div v-if="showWatermark" class="wm-preview" :style="previewStyle"></div>
  </main>
</template>

<style>
/* ...上面的样式不变... */

button.toggle {
  margin: 8px 0 20px;
  font-size: 16px;
  background: #07c160;
}

.wm-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;      /* 高于盲水印层的 9999 */
  pointer-events: none; /* 不挡住鼠标点击 */
}
</style>
```
---

## 七、原理浅析（想深入再看）

这个插件其实只做了三件事：

1. **画图**：用 `Canvas` 把水印文字画成一张小图，文字透明度设为 `0.005`（所以看不见）。
2. **铺满全屏**：把这张图作为背景，`background-repeat: repeat` 平铺到整个页面，盖在最上层（`z-index: 9999`），并设 `pointer-events: none` 让它不影响点击。
3. **防篡改**：用 `MutationObserver` 监听 DOM，一旦有人删除或修改水印元素，就自动重新生成。

还有个贴心的小细节：它会**自动判断背景颜色**——深色背景用白字、浅色背景用黑字，保证任何页面都能用。

---

## 八、常见问题（FAQ）

**Q1：我直接截图转发，水印能追查到吗？**
A：截图会带上水印（因为它在最上层、铺满全屏）。把截图放大、拉高对比度，文字就会浮现。这就是「盲水印」的意义。

**Q2：水印文字能不能改成动态的（比如登录用户名、工号）？**
A：可以。把 `text` 换成变量即可，比如登录后传入 `text: '工号 ' + user.id`。这样谁泄露的一目了然。

**Q3：能改透明度、字号、旋转角度吗？**
A：这个插件目前只开放了 `text` 一个参数，透明度（0.005）、字号（16px）、不旋转都是写死的。如果需要更强的定制，可以参照它的源码自己写一个，思路和上面「原理浅析」完全一致。

**Q4：会影响页面性能或点击吗？**
A：基本不会。水印是一张静态背景图，且 `pointer-events: none`，点击、滑动都穿透到正常内容。

---

## 九、总结

回顾一下，给网页加盲水印的完整流程：

1. `npm install vue3-blind-watermark` 装插件；
2. 在入口文件里 `app.use(watermark, { text: "你的版权信息" })`；
3. 可选：加一个「查看水印」按钮，方便调试和演示。

一共三步，核心代码不超过 5 行。是不是比想象中简单很多？

> 完整可运行的项目代码，请见本仓库（demo 目录）。

---

## 附：项目文件清单

| 文件 | 作用 |
|------|------|
| `package.json` | 依赖与启动脚本 |
| `vite.config.js` | Vite 配置 |
| `index.html` | 页面入口 |
| `src/main.js` | 应用入口，启用盲水印 |
| `src/App.vue` | 页面内容 + 「查看盲水印」按钮 |
| `src/watermark.config.js` | 水印文字配置 |

---

盲水印（Invisible Watermark） 是一种肉眼几乎看不见、但技术上可以追溯的水印。

零基础教程：给你的网页加上「盲水印」，防止内容被截图泄露

Java开发

前端

开发工具

安全

面向小白的盲水印添加教程，仅需3行核心代码。使用vue3-blind-watermark插件，通过Canvas绘制低透明度水印并平铺全屏，支持防篡改和动态文字配置。教程包含完整项目搭建步骤、代码示例及常见问题解答，帮助开发者快速实现网页版权保护功能。

代码解释

服务器

Windows

2026上云采购 | AI焕新·智启新局

coding

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

零基础教程：给你的网页加上「盲水印」，防止内容被截图泄露-腾讯云开发者社区-腾讯云

零基础教程：给你的网页加上「盲水印」，防止内容被截图泄露

零基础教程：给你的网页加上「盲水印」，防止内容被截图泄露

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐